Engrain by ByteRush

WEB.09.03 Mid-level· 10 minCore — asked often

Stacking contexts and z-index: why z-index: 9999 still loses

What creates a stacking context, how painting order works inside one, why a huge z-index cannot escape its parent's context, and how the top layer goes above everything.

Comes up in: Web fundamentals, UI coding, Machine coding

Learn#

Arjun’s dropdown has z-index: 9999 and still hides behind the sticky navbar with z-index: 10. He tries 99999. Nothing changes.

A stacking context is a group of elements painted together as one layer of the page. z-index only orders elements within the same stacking context. Once the dropdown’s parent .card has its own context with z-index: 5, the whole card, dropdown included, is painted as a single item at level 5. Level 5 is below the navbar’s 10, whatever happens inside.

Many properties create a context: a positioned element with a z-index, position: fixed or sticky, opacity below 1, any transform or filter, isolation: isolate, and will-change for those. A transform added for an animation often creates one by accident.

Why 9999 loses to 10Step 1 of 4

State

  • root context: card = 5, navbar = 10

Page

    empty

    The page has two siblings: .card (position: relative; z-index: 5) and .navbar (position: sticky; z-index: 10).

    Read the steps as text
    1. The page has two siblings: .card (position: relative; z-index: 5) and .navbar (position: sticky; z-index: 10).
    2. Inside .card, a dropdown has z-index: 9999. But .card created a stacking context, so 9999 only counts inside it.
    3. The browser compares siblings at the level where the two paths split: card (5) against navbar (10).
    4. The navbar wins, and everything in .card is painted under it, the dropdown included.

    Predict#

    Predict first

    A modal has position: fixed; z-index: 1000 but is a child of a .sidebar with opacity: 0.99. The header has z-index: 50. Is the modal above the header?

    Interview angle#

    Say it like this — about 30 seconds

    “A stacking context is a group of elements painted together, as one unit, inside its parent context. Many things create one: a positioned element with a z-index, fixed or sticky position, opacity below one, transforms and filters. The z-index only compares siblings in the same context. So a 9999 inside a parent at level 5 can never beat a sibling at 10. To fix it, I find the context that traps the element, or I render the overlay outside it.”

    Stays on your device. Nothing is uploaded.
    Follow-up What is a stacking context, and what creates one?
    An isolated painting group; created by z-index on positioned or flex/grid items, fixed or sticky, opacity below 1, transform, filter, isolation, will-change, contain and more.
    Follow-up Why doesn't my z-index work?
    The element is static (z-index ignored), or an ancestor creates a stacking context that sits lower than the thing you want to cover.
    Follow-up How do modals avoid this problem entirely?
    Portals render them near the root, or <dialog> and popovers use the top layer, above all stacking contexts.

    Practice#

    Guided

    Encode what creates a stacking context, and decide which of two elements is painted on top.

    Done when

    • createsStackingContext handles every trigger in the list, and ignores zIndex on static elements that are not flex or grid items.
    • onTop compares at the first level where the paths differ, then falls back to document order.
    Your solution
    Ctrl/⌘ + Enter

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    Does z-index work on a position: static element?

    No, unless it is a flex or grid item.

    Name four things that create a stacking context.

    z-index on a positioned element, opacity below 1, transform, isolation: isolate.

    Why can z-index: 9999 lose to z-index: 10?

    It is inside a parent stacking context that ranks below the other element.

    What does isolation: isolate do?

    Creates a stacking context with no other visual effect.

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round

    Inside one context, higher z-index is painted later, on top. Equal values fall back to document order. isolation: isolate creates a context with no visual side effect, a clean way to contain a component’s z-indexes.

    Check yourself: Which wins: z-index 2 in one context, or a later sibling with the same z-index 2?

    The later sibling in document order.

    How it works underneathSenior rounds
    Painting order inside a context: the context’s background and borders, then negative z-index children, block boxes, floats, inline content, z-index 0 and auto positioned elements, then positive z-index in order .
    Check yourself: In a context, are negative z-index children painted above or below the context's own background?

    Above its background, but below its normal-flow content.

    Edge cases and trapsWhere people slip

    Flex and grid items accept z-index even when static, and create a context when it is not auto. position: fixed and sticky always create a context. DevTools’ 3D View and Layers panel show the contexts .

    Check yourself: Does z-index work on a static flex item?

    Yes. Flex and grid items accept z-index without being positioned.

    In productionStaff-level answers

    Modal dialogs and popovers live in the top layer, above every stacking context, so they need no z-index (WEB.07.02).
    Keep a small named scale as tokens, such as dropdown 10, header 20, toast 30, and use isolation for components.

    Check yourself: What is a z-index scale?

    A small set of named levels (base, dropdown, header, modal, toast) used everywhere.

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • What is a stacking context and what creates one?
    • Why doesn't my z-index work?