How Does z-index Control Element Overlap in CSS?

Understanding z-index stacking order

Stacking order determines the order in which elements overlap on a web page. The z-index property is used to control the stacking order, giving higher values to elements that should appear in front of others.

Understanding Position and z-index

z-index applies to positioned elements (absolute, relative, fixed, sticky) and flex or grid items with position: static.

Stacking Contexts

When an element is positioned, a stacking context is created, which confines the z-index scope to the element and its descendants.

Stacking Order

In the stacking order without z-index, elements follow the order:

1. Root element's background and borders
2. Non-positioned (static) block, then floating elements (in order of appearance)
3. Inline elements
4. Positioned elements (in order of appearance)

With z-index:

1. Root element's background and borders
2. Positioned elements with z-index < 0
3. Non-positioned block, then floating elements (in order of appearance)
4. Inline elements
5. Positioned elements (in order of appearance)
6. Positioned elements with z-index > 0

Examples

Mixed sibling divs:

• Div1: position: relative, z-index: 10;
• Div2: position: static;
• Div3: position: fixed, z-index: 20;

Div3 will overlap Div1 and Div2, while Div1 will overlap Div2.

Nested and mixed divs:

• Div1: position: absolute, z-index: 10;
• Div2: position: static;
• Div3: position: fixed, z-index: 20;
• Div4: position: relative, z-index: 15;

Div3 will overlap all divs. Div4 will overlap Div1 and Div2, while Div1 will overlap Div2.

The above is the detailed content of How Does z-index Control Element Overlap in CSS?. For more information, please follow other related articles on the PHP Chinese website!