DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
EscClose
  • 1.8.0

  • Day

    Night

    Preview

    Switch mode
  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewTokensSemantic TokensRecipesSlot Recipes

Design Tokens

AnimationsColorsGradientsSpacingShadowsFontZ-Index

Z-Index

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

View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

Tokens

Cerberus provides the following z-index tokens: theme.tokens.zIndex

z-index: hide
z-index: base
z-index: initial
hide
base
decorator
dropdown
sticky
banner
overlay
modal
popover
toast
tooltip
  • 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

  • Tokens
Edit this page on Github