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.
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 headless-styles package, we use a structured layering map to organize our z-index values. Here is the map we use for our API:
| Key | Value | Usage |
|---|---|---|
| hide | -1 | |
| auto | 'auto' | |
| base | 0 | |
| decorator | 50 | psuedo elements, etc. for borders or other |
| dropdown | 1000 | |
| sticky | 1100 | |
| banner | 1200 | |
| overlay | 1300 | |
| modal | 1400 | |
| popover | 1500 | |
| toast | 1600 | |
| tooltip | 1700 |
Helper Functions
Pando also provides some helpers for referencing the keys and values of the z-index map.
Import
import { getZindexKeys, getZindex } from '@pluralsight/headless-styles'
getZindexKeys
function getZindexKeys(): ReturnType
Parameters
This function does not accept any parameters.
Returns
- An object consisting of keys and values matching the keys of the z-index map.
getZindex
function getZindex(key: ZindexKey): number | string
Parameters
type ZindexKey = keyof ReturnType<typeof getZindexKeys>
Returns
- The z-index value corresponding to the given key from the z-index map.