z-index works in CSS with a dependency on positioning and stacking context and cannot be effective alone. Elements must be positioned in relative, absolute, fixed or sticky to use z-index; 1. Elements in different stacking contexts will not directly compare z-index values; 2. The stacking context is created by the root element, positioning elements with z-index set, etc.; 3. Common problems such as the menu is blocked, which can be solved by improving the z-index of the entire container; 4. The modal box should be placed under the body to avoid nesting in low-level contexts; 5. The hierarchy range should be planned instead of abuse of high numerical values, such as UI overlay layer 1000, modal box 2000, prompt 3000, notification 4000. Understanding these rules can effectively reduce confusion.

The z-index property in CSS might seem simple at first glance, but it can get tricky when elements are layered. It doesn't work on its own—it depends heavily on positioning and something called a stacking context . Let's break it down.

How z-index Actually Works

Contrary to what some beginners think, setting a high z-index value like 9999 doesn't always bring an element to the front. For z-index to take effect, the element must have a position value of relative , absolute , fixed , or sticky .

For example:

 .box {
  position: relative;
  z-index: 5;
}

This .box will appear above elements with lower z-index values ??within the same stacking context . If another box is positioned and has a z-index: 10 , it'll sit above this one—assuming both live in the same context.

But if they're in different stacking contexts (more on that next), their z-index values ??won't directly compete.

What Is a Stacking Context?

A stacking context is like a self-contained layer in your webpage. Elements inside it are stacked relative to each other, not to elements outside of it.

Stacking contexts form under certain conditions:

• The root element ( ) creates the initial stacking context.
• Any element with:
  • position set to relative , absolute , or fixed a z-index value (even 0)
  • display: contents (in some cases)
  • filter , opacity , <code>transform , mix-blend-mode , etc.
  • isolation: isolate
  • will-change targeting certain properties

Once a new stacking context forms, everything inside it is treated as a group. So even if you give a child element a super high z-index , it won't escape that parent context.

Common Pitfalls and Fixes

Here are some real-world issues people run into—and how to fix them:

• Dropdown menus hidden behind other content:
  This usually happens because the dropdown lives in a stacking context with a lower base level than another container. Try increasing the z-index of the entire dropdown container—not just the menu itself.

• Modals not showing up on top:
  Make sure the modal sits directly under the and not nested inside a component that creates its own stacking context with a low z-index baseline.

• Overusing high z-index values:
  Some developers throw in z-index: 99999 to force visibility. But this leads to messy layering later. Instead, plan ahead with consistent layers:

  • UI overlays: 1000
  • Modals: 2000
  • Tooltips: 3000
  • Notifications: 4000

That way, you avoid unnecessary conflicts.

Final Thoughts

Understanding z-index means understanding stacking contexts. They define how layers related to each other. Once you realize that z-index only works within these boundaries, a lot of confusion goes away.

So remember:

• Position matters before z-index
• Stacking contexts isolate layers
• Don't go overboard with numbers

Basically that's it.

The above is the detailed content of How does the z-index property work and what are stacking contexts?. For more information, please follow other related articles on the PHP Chinese website!