Z-index
Pando uses a named map of values to provide consistent and predictable layering of elements along the z-axis based on the element’s purpose.
Token Usage
// import { css } from '@/styled-system/css'
<div class={css({ zIndex: 'base' })}>base z-index</div>Example
Modify the divs with the z-index tokens see how the z-index values affect the layering of the elements.
Map
Pando reserves the 1000-1999 range, plus 50 for non-important style values (borders, etc.). This gives your product the freedom to use the 100-999 range.
In the panda-preset package, we use a structured layering map to organize our z-index values. Here is the map we use for our API:
| Token | Value | Description |
| hide | -1 | Used for when you need to hide elements in the layer stack |
| base | 0 | Initial layer value |
| decorator | 50 | Used for positioning pseudo-elements, borders, and other similar elements in the layer stack |
| dropdown | 1000 | Used for positioning any dropdown like elements in the layer stack |
| sticky | 1200 | Used for positioning elements that need to stick to their nearest scrolling ancestor in the layer stack |
| banner | 1300 | Used for positioning any elements that are used like a admonition in the layer stack |
| overlay | 1400 | Used for positioning overlay elements in the layer stack |
| modal | 1500 | Used for positioning modal elements in the layer stack |
| popover | 1600 | Used for positioning popover elements in the layer stack |
| toast | 1700 | Used for positioning toast elements in the layer stack |
| tooltip | 1800 | Used for positioning tooltip elements in the layer stack |