Z-Index

The layered order of elements within a document.

Usage

z-index: hide

z-index: base

z-index: initial

Select z-index:

Select a z-index value to see the layer effect.

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