Z-Index
Usage
A z-index controls the order in which components are stacked in a site or application. By grouping types of components together and providing a fixed z-index, we can make sure components are layered properly in the view, without running into other components. This is especially useful when dealing with components like modals and alerts that always have to appear on top of other components.
Specs
The table below shows the z-index for each major component types on our site. The greater the number, the higher its position in the stack.
| Component | z-index |
|---|---|
| Page Components | 0-98 |
| Page Tooltips | 99 |
| Modal Background | 100 |
| Modal Components | 101-198 |
| Modal Tooltips | 199 |
| Popup Background | 200 |
| Popup Components | 201-298 |
| Popup Tooltips | 299 |
| Updating Spinners | 300 |
| Third Party Overlays | 400 |