Z-index

Each of these components sits on its own layer, a hundred apart, in the order you would expect them to cover one another: a modal over a drawer, a tooltip over both, a notification over everything.

Leave these alone. They are set so the components work together, and lowering one is the quickest way to lose a modal behind the page it opened from.

A few parts stack only against their own component, not against the page, so their numbers are small on purpose.

A z-index only competes with its siblings, inside what CSS calls a stacking context. That is why a dropdown menu at 11 still sits above a page full of elements at 100: it is measured against the dropdown around it, not against the page.

It also explains the problem people meet most often. An ancestor with a transform, a filter, a backdrop-filter, an opacity below 1, or will-change starts a stacking context of its own, and everything inside is trapped in it. A modal inside such an element cannot climb out, whatever its number, and will be covered by the next element that sits above its ancestor.

<!-- The scale transform starts a stacking context, so the dropdown -->
<!-- inside this card cannot rise above anything outside it -->
<div class="transition hover:scale-105">
  <Card>
    <Dropdown label="Actions">...</Dropdown>
  </Card>
</div>

If a component of this library ends up behind something it should cover, look up the tree for one of those properties before reaching for a bigger number.

Three places are free for your own elements, and each keeps you out of the library's way.

• Below 100 - anything that belongs to the page itself, such as a sticky table header or a cookie bar that the navbar may cover.
• Between two layers - for example 250 for a panel of your own that should sit over a dropdown but under a drawer.
• Above 700 - a splash screen or a full-page loader, the only things that should cover a notification.