Z-index
Also called stacking order or z-order
A CSS property that decides which element appears on top when elements overlap, with higher numbers sitting closer to the viewer.
import { Menu } from '@base-ui/react/menu';
// One small scale instead of arbitrary numbers:
// z-10 sticky header · z-20 menus · z-30 overlays · z-40 modals · z-50 toasts
export function ProjectsPage() {
return (
<>
<header className='sticky top-0 z-10 flex h-16 items-center border-b bg-background px-6 font-semibold'>
Projects
</header>
{/* The hover transform makes this card its own stacking context. */}
<article className='m-6 flex items-center justify-between rounded-xl border p-4 transition-transform hover:-translate-y-0.5'>
<h2 className='font-medium'>Spring launch</h2>
<Menu.Root>
<Menu.Trigger className='rounded-md px-2 py-1 hover:bg-muted'>
⋯
</Menu.Trigger>
{/* The portal moves the menu to the end of <body>, outside the card's
layer, so z-20 is compared with the header's z-10. */}
<Menu.Portal>
<Menu.Positioner className='z-20' sideOffset={4} align='end'>
<Menu.Popup className='min-w-36 rounded-lg border bg-background p-1 shadow-lg'>
{['Rename', 'Duplicate', 'Delete'].map((label) => (
<Menu.Item
key={label}
className='rounded-md px-3 py-1.5 text-sm outline-none data-highlighted:bg-muted'
>
{label}
</Menu.Item>
))}
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
</article>
</>
);
}Clean up the stacking order: define a z-index scale of 10 for the sticky header, 20 for dropdowns and popovers, 30 for the modal backdrop, 40 for modals, and 50 for toasts, and use it everywhere instead of arbitrary numbers. Render dropdown menus in a portal so a parent with transform or overflow: hidden cannot trap or clip them.
Paste into Layerwise or any AI coding tool.
What is Z-index?
The screen is flat, but elements often overlap: a dropdown over a card, a modal over the page, a sticky header over scrolling content. z-index sets the stacking order, so an element with z-index: 3 covers one with z-index: 2. It works on positioned elements (relative, absolute, fixed, or sticky) and on children of flex and grid containers.
The usual surprise is the stacking context. Properties such as transform, filter, opacity below 1, or a z-index on a positioned parent seal an element and its children into their own layer. A child with z-index: 9999 still cannot rise above anything outside that layer, which is why a menu can hide behind the header no matter what number you give it.
Pick a small, named scale and stick to it, for example 10 for sticky headers, 20 for dropdowns, 30 for overlays, 40 for modals, and 50 for toasts. Rendering menus and modals at the end of the page body with a portal avoids most stacking context problems.
Related terms
All termsModal
A window that opens over the page, dims everything behind it, and blocks the rest of the interface until you finish or dismiss it.
Dropdown menu
A list of actions that drops down from a button when you click it, then closes as soon as you pick one.
Sticky header
A top bar that stays pinned to the top of the screen while the page scrolls underneath it, so navigation is always one click away.
Overflow
A CSS property that decides what happens when content is bigger than its box: spill out, get clipped, or scroll inside it.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
