The ineffectiveness of z-index is often due to the influence of the cascaded context. 1. The stacking context is the "space scope" of an element, and the stacking order of child elements is calculated independently; 2. The creation method includes setting positioning z-index, opacity is less than 1, transform, etc.; 3. z-index is only valid for positioning elements, and the levels cannot be directly compared when the parent-child level is in different contexts; 4. The browser comprehensively determines the stacking order based on the DOM order, positioning, layout method, etc.; 5. Practical problems such as the modal box is blocked, you need to check the context level and adjust the structure or z-index instead of blindly increasing the value.

z-index and stacking context in CSS are key concepts that control the order in which elements are stacked in the Z-axis direction. Many people have used z-index , but sometimes they find that it "does not take effect", which often ignores the role of the stacking context. This article will talk about how to really use them well.

What is a cascading context?

The stacking context can be understood as a "spatial range", within which the stacking order of all child elements is computed relative to each other.
There are several ways to create a new cascaded context:

• Set position not static for elements (such as relative , absolute , fixed , sticky ) and set z-index value at the same time
• Use opacity less than 1
• Use transform , filter , will-change and other properties
• Set isolation: isolate

Once a parent element forms its own stacking context, z-index between its child elements can only be compared in that context and will not directly compete with the external hierarchy.

z-index usage tips

z-index is the most familiar property that controls stacking order, but it is only valid for positioning elements (i.e., setting non- static position ).

Common misunderstandings:

• Setting z-index to a normal div directly has no effect
• When the parent and child elements are in different stacking contexts, the parent class as a whole determines the upper limit of the child's position.

Suggested practices:

• Always use z-index in conjunction with position: relative or other positioning methods
• Try to keep it in one context when controlling the hierarchy to avoid hierarchy structures that are too deep.
• Avoid using oversized values ??such as z-index: 999999 , which can easily get out of control and be difficult to maintain.

How is the order of stacking determined?

When a browser renders a page, it does not only look at z-index , but determines which elements are displayed on it based on a set of rules. This rule includes:

• DOM order of elements
• Are positioning and z-index set?
• Does it belong to a different stacking context
• Whether to use flex , grid and other layout methods

The order is as follows (from bottom to top):

• Background and borders
• Block-level elements in normal streams
• Floating elements
• Positioning elements (sorted by z-index )

If you find that the two positioning elements are not stacked as expected, it is most likely because one is wrapped in the other stacking context.

Issues to be noted in practical applications

In actual development, common problems include the modal box being blocked, the navigation bar menu disappearing behind the carousel map, etc., which are related to the stacking context.

For example:

You have a pop-up component that uses position: fixed and sets z-index: 1000 , but a carousel image on the page uses transform: translateX() , which will cause the container where the carousel image is located to generate a new cascade context, causing the pop-up window to be blocked.

The solution at this time is to check and unify the context level of both, or adjust z-index appropriately, instead of blindly adding numbers.

Basically that's it. Understanding the relationship between the stacking context and z-index can help you more stably control the stacking order of page elements.

The above is the detailed content of Working with z-index and stacking contexts in css. For more information, please follow other related articles on the PHP Chinese website!