# Z-index Several components in this library stack above the page. This guide gives the order they use, explains why a number sometimes loses to a smaller one, and shows where to put overlays of your own. ## The Layers 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. | Component | Class | Value (z-index) | | --- | --- | --- | | Navbar | `.z-100` | 100 | | Dropdown | `.z-200` | 200 | | Drawer | `.z-300` | 300 | | Modal | `.z-400` | 400 | | Popup | `.z-500` | 500 | | Tooltip | `.z-600` | 600 | | Notifications | `.z-700` | 700 | 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. ## Layers Inside a Component A few parts stack only against their own component, not against the page, so their numbers are small on purpose. | Part | Class | Value (z-index) | | --- | --- | --- | | Field panel of `Combobox`, `DatePicker` and `TimePicker` | `.theui-field-panel` | 50 | | Dropdown menu | `.dropdown-content` | 11 | | Mobile menu of the navbar | `.theui-navbar-collapse` | 1 | > **Note:** A field panel is above the page but below the `Navbar`. A `Combobox` or `DatePicker` right at the top of a page, under a fixed navbar, opens its list behind that navbar. Leave a little room below the navbar, or open the field lower down the page. ## How Stacking Works 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. **A dropdown that goes behind the next card** ```svelte
...
``` 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. ## Your Own Overlays 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. --- Category: Guides Keywords: z-index, stacking, stacking context, css, guide, theui-svelte, svelte, component-library Full documentation set: https://www.theui.dev/llms-full.txt