Get Started
Components
Styling
Theming

Z-Index

The z-index property controls the vertical stacking order of elements that overlap.

Tokens

Cerberus provides the following z-index tokens:

theme.tokens.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