Layout & CSS More detail D · Everyday or special-use name

Stacking Context & Z-index — Learning Bundle

This learning bundle connects two CSS ideas. A stacking context keeps its paint order separate. z-index orders boxes that can take part inside that context. The bundle is not one standard CSS term.

See how it works
You might call it stacking context vs z-index learning bundlepaint-order lessonlayer-order comparison

See how it works

Original worked exampleStacking Context & Z-index — Learning Bundle

Another example

A tooltip with z-index 999 may still hide behind another layer. Its transformed parent can create a separate stacking context.

Main parts

  1. 01Outer constraint
  2. 02Content and spacing model
  3. 03Computed size or reflow result

Use it when

Find the stacking context that matters before you change a z-index value.

Do not use it when

Never use a huge z-index value to hide the real boundary between contexts.

Name used in code

stacking context / z-index

Before you ship

Check that every member concept has its own name and link. Show all members in the same situation. Give a visible rule for when each one applies and which groups are valid. Never present the bundle as one canonical pattern or as parts that can be swapped freely.

Request you can copy

Outcome: Use Stacking Context & Z-index — Learning Bundle to compare its member concepts. Keep their boundaries clear, then decide which members apply and which can work together. User context: A tooltip with z-index 999 may still hide behind another layer. Its transformed parent can create a separate stacking context. Learning bundle to unpack: Stacking Context & Z-index — Learning Bundle. Canonical members: Stacking Context, z-index Why this comparison helps: Find the stacking context that matters before you change a z-index value. Do not treat the bundle as one pattern when: Never use a huge z-index value to hide the real boundary between contexts. Comparison requirements: Name every member concept on its own. Explain its job and limits. Show every member in the same real situation. Give a visible sign for when to use, combine, or leave out each member. Decision quality: Keep platform and evidence limits clear. Show which members can work together. Point out false matches, unsafe swaps, and cases that need another concept. Acceptance criteria: A reader can explain each member in one sentence and tell them apart in the example. They can defend the chosen member or valid group and open every canonical guide. Evidence and limits (evidence boundary): This is not a normative standard. Its name, limits, and expected behavior can change from one source to another. Unknowns to confirm: Target platform, decision setting, limits, and evidence needed to use, combine, or leave out members.

Check this request

Review the current use of Stacking Context & Z-index — Learning Bundle. Definition: This learning bundle connects two CSS ideas. A stacking context keeps its paint order separate. z-index orders boxes that can take part inside that context. The bundle is not one standard CSS term. Release checks: Check that every member concept has its own name and link. Show all members in the same situation. Give a visible rule for when each one applies and which groups are valid. Never present the bundle as one canonical pattern or as parts that can be swapped freely. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.

D
How official is this term?

Everyday or special-use name

This may be an everyday or old name, a name used by one company, or a Vibulary category. Sources may support practice or limitations, but they may not define the name.

This is not a normative standard. Its name, limits, and expected behavior can change from one source to another.

Scope
Editorial bundle relating distinct CSS stacking-context and z-index concepts
Document status
draft
Checked on
2026-07-30

Evidence sources & scope

Authority source · W3C CSS Working Group · draft CSS Positioned Layout Module Level 3 Scope: CSS positioning Role here: Helpful background, not a definition Source covers: canonical name, definition, semantics, implementation

Copy it yourself

The browser could not copy this. Select the request below and copy it yourself.