The z-index property controls the vertical stacking order of elements that overlap.
Use the zIndex to apply layering to an element.
<Box zIndex="sticky" />| Prop | CSS Property | Token Category |
|---|---|---|
zIndex | z-index | zIndex |
Token: hide
-1
Used for when you need to hide elements in the layer stack
Token: base
0
Initial layer value
Token: decorator
50
Used for positioning pseudo-elements, borders, and other similar elements in the layer stack
Token: dropdown
1000
Used for positioning any dropdown like elements in the layer stack
Token: sticky
1200
Used for positioning elements that need to stick to their nearest scrolling ancestor in the layer stack
Token: banner
1300
Used for positioning any elements that are used like a admonition in the layer stack
Token: overlay
1400
Used for positioning overlay elements in the layer stack
Token: modal
1500
Used for positioning modal elements in the layer stack
Token: popover
1600
Used for positioning popover elements in the layer stack
Token: toast
1700
Used for positioning toast elements in the layer stack
Token: tooltip
1800
Used for positioning tooltip elements in the layer stack
On this page