The reason why z-index does not take effect is the effect of the stacking context. ① z-index is only valid for positioning elements and needs to be in the same stacking context; ② stacking context is an independent space created by the parent element, and the stacking order of child elements is only effective in that space; ③ The way to create a new stacking context includes using transform, opacity, filter and other attributes; ④ A common problem is that z-index in different stacking contexts cannot be directly compared, so you need to check whether the common ancestor has created stacking context; ⑤ The troubleshooting method is to view the style of the parent element through the developer tool; ⑥ The principle of correct use of z-index includes hierarchical grouping management, avoiding arbitrary nesting hierarchies, keeping the DOM structure clear, and simplifying the structure during debugging. Only by understanding stacking context can you correctly control hierarchical relationships.

z-index seems simple, but it often makes people feel troubled. It does not work independently, but depends on the structure of the entire stacking context. If you find that an element should be displayed at the top but is always suppressed, the problem is most likely in the entire hierarchy relationship, rather than z-index itself being written incorrectly.

What is stacking context?

z-index is only valid for positioning elements (such as setting position: relative , absolute , fixed , or sticky ). But the premise that it really works is that these elements must be in the same stacking context .

A stacking context is a "independent space" created by a parent element, and the stacking order between the child elements inside takes effect only in this space. Once you cross this space to compare the stacking order, you won't count.

For example:

 <div class="parent1">
  <div class="child" style="z-index: 1000;">Child A</div>
</div>

<div class="parent2">
  <div class="child" style="z-index: 1;">Child B</div>
</div>

Even if A's z-index is much larger than B, if they are not in the same stacking context, who is in the end, it depends on the position and level of their respective parents in the entire page.

What operations create a new stacking context?

• Use z-index to locate properties
• Use opacity less than 1
• Using transform
• Using filter
• Use will-change
• Use isolation: isolate
• Using mix-blend-mode
• Use perspective or clip-path

These will quietly create a new stacking context, affecting the level you originally wanted to control.

FAQ: Why doesn't z-index take effect?

The most common situation of this problem is that you compare z-index in different stacking contexts.

For example, the following common scenario:

 <div class="modal" style="z-index: 100;">
  <div class="content">I am popup content</div>
</div>

<div class="sidebar" style="z-index: 99;">
  <div class="menu">Menu Bar</div>
</div>

It looks like z-index of modal is larger and should cover the sidebar. But if .modal and .sidebar belong to different parent elements, and any of these parent elements create their own stacking context, then z-index of the two cannot be directly compared.

At this time, you have to look up to see who their closest common ancestor is and whether that ancestor also created a stacking context. Sometimes you will find that the problem is not in the current element at all, but in its "ancestor".

How to check?

1. Open the browser developer tools, select the relevant elements, and view their styles.
2. opacity whether each parent element has transform properties filter may create stacking context.
3. If there are multiple stacking context levels nested, they need to adjust their z-index uniformly, or reorganize the DOM structure.

How to use z-index correctly?

To get z-index to work as you expect, we recommend following a few simple principles:

• Hierarchical grouping management : Set a fixed z-index range for different functional modules, such as 100~199 for navigation bar, 200~299 for pop-up windows, and 300~399 for masks. This is not easy to conflict.

• Avoid nesting levels at will : Don't add z-index to every component, otherwise it will easily cause confusion. Try to keep hierarchical control concentrated in top-level layouts or common components.

• Keep the DOM structure clear : put the elements that need to be superimposed on each other in the same container so that they are under the same stacking context, making it easier to control the hierarchy.

• Simplify structure during debugging : When you encounter hierarchical confusion, you can temporarily remove some irrelevant elements, or highlight each area with background color to help you see their hierarchical relationship more intuitively.

Basically that's it. The key to understanding z-index is to figure out the stacking context it is in. As long as you don’t jump into the misunderstanding of “what value is greater”, but analyze it from the structural level, most problems can be solved.

The above is the detailed content of Troubleshooting CSS `z-index` stacking contexts. For more information, please follow other related articles on the PHP Chinese website!