CSS layer priority z-index

CSS Layer Priority z-index

In CSS, the z-index property is used to define the hierarchical relationship of elements in the stacking order. When multiple elements overlap, the z-index property controls their display order. Understanding the z-index precedence rules is crucial when working with web page layouts.

1. Basic Concepts

In HTML documents, elements are stacked one on top of another in the order they appear in the DOM tree. This stacking order is determined by the element’s position within the DOM tree. If multiple elements overlap, the later elements cover the earlier ones.

In this case, the z-index property can be used to control the display order of elements. The z-index property value is an integer representing the stacking order of an element. Elements with higher z-index values appear above those with lower z-index values. If two elements have the same z-index value, their display order is still determined by their position in the DOM.

2. Layer Precedence

In CSS, the z-index property has the following precedence rules:

The z-index property of a parent element affects the stacking order of its child elements. A child element’s z-index value cannot exceed the parent’s z-index value.
Elements with negative z-index values are placed below in-flow elements.
Elements with a z-index value of 0 are placed above in-flow elements.
Elements with positive z-index values are placed above elements with a z-index value of 0.
The z-index value of an absolutely positioned element overrides the z-index value of a non-positioned element.
The hierarchy of elements above other elements is: fixed positioned elements > absolutely positioned elements > floating elements > non-positioned elements.

3. Sample Code

The following is a simple sample code that demonstrates the use of the z-index property:

<!DOCTYPE html> 
<html Tutorial">html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Z-index Example</title> 
<style> 
.parent { 
position: relative; 
z-index: 1; 
} 
.child1 { 
position: absolute; 
top: 50px; 
left: 50px; 
width: 100px; 
height: 100px; 
background-color: red; 
z-index: 2; 
} 
.child2 { 
position: absolute; 
top: 70px; 
left: 70px; 
width: 100px; 
height: 100px; 
background-color: blue; 
z-index: 1; } 
</style> 
</head> 
<body> 
<div class="parent"> 
<div class="child1"></div> 
<div class="child2"></div> 
</div> 
</body> 
</html>

In this example, the .parent element is set to a z-index of 1, the .child1 element is set to a z-index of 2, and the .child2 element is set to a z-index of 1. According to the hierarchy precedence rules, the .child1 element will be displayed above the .child2 element.

4. Run Results

Open the browser to view the running results of the above sample code. You will see a red square and a blue square. The red square will be displayed above the blue square.

By learning and understanding the hierarchy precedence rules of the z-index property in CSS, you can better control the display order of elements and achieve more complex and diverse web page layout effects.