Z-Index

The layered order of elements within a document.

Usage

z-index: hide
z-index: base
z-index: initial

Values

  • 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