Layering Tokens
Tokens that define the order in which elements are stacked on top of each other.
Layering tokens define the order in which elements are stacked on top of each other.
This is implemented using the z-index CSS property.
It’s important to note that these values are not fixed and can be adjusted as needed. If you need to integrate Forge with a another library that uses different z-index values, you can override these tokens to match the other library’s values, and Forge will automatically adjust to use the new values across all components.
| Token | Value | Description |
|---|---|---|
--forge-z-index-surface | 1 | The base layer for surfaces that sit above page content, such as sticky headers and side panels. |
--forge-z-index-header | 4 | The layer for page headers, above surfaces so that they stay visible while content scrolls. |
--forge-z-index-backdrop | 7 | The layer for scrims behind modal content, above headers and surfaces. |
--forge-z-index-dialog | 8 | The layer for modal content such as dialogs and modal panels, above the backdrop. |
--forge-z-index-notification | 9 | The layer for notifications, above modal content. |
--forge-z-index-popup | 10 | The layer for popups such as menus, popovers, and dropdowns, above modal content. |
--forge-z-index-tooltip | 11 | The layer for tooltips, the highest layer so they are never obscured. |