The z-index property in CSS is used to control the stacking order of elements on a web page when they overlap. It specifies the "z-index" or the depth of an element along the z-axis, which is the axis that runs perpendicular to the screen. Elements with a higher z-index value will be placed on top of elements with lower values. This property is especially useful when dealing with overlapping elements or creating complex layouts.
However, the z-index property interacts with a concept called "stacking context," which determines how elements are stacked and ordered in relation to one another. Understanding stacking context is crucial for using z-index effectively.
Here are some key points about z-index and stacking context:
• Stacking Context:A stacking context is a three-dimensional conceptualization of how elements are layered on top of each other on the screen. Each stacking context has its own stacking order that determines how its child elements are positioned in relation to each other.
• Creating a Stacking Context: Certain properties and conditions create a new stacking context:
Elements with position: absolute; or position: fixed; and a z-index value other than auto.
Elements with position: relative; and a z-index value other than auto.
Elements with opacity less than 1.
CSS3 transforms and CSS3 filters.
Elements with mix-blend-mode other than normal.
Elements with isolation: isolate.
• Stacking Order: The stacking order of elements within a stacking context is determined by their z-index values. Elements with higher z-index values appear on top of elements with lower values.
• Stacking Order Across Contexts: Elements within different stacking contexts are stacked according to the stacking context's own rules. A higher z-index value in one stacking context might not necessarily be on top of an element in a different stacking context with a lower z-index value.
• Auto Stacking: Elements with z-index: auto; are positioned in the same stacking context as their parent and siblings, and their stacking order is determined by their position in the normal flow.
• Global Stacking Context: The root element (usually the <html> element) establishes a global stacking context with a default stacking order. This is the starting point for all other stacking contexts.
Understanding stacking context and using the z-index property can help you control the visual layering of elements in your web design. It's important to be mindful of how different elements and their stacking contexts interact, especially when working on complex layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Z-index and Stacking Context Example</title>
</head>
<body>
<h1>Welcome to JTC</h1>
<p>In this example, we have three colored boxes within a container. Here's how stacking context and z-index come into play:</p>
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 400px;
height: 300px;
margin: 50px auto;
}
.box {
position: absolute;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
}
.box1 {
background-color: #FF5733;
z-index: 2;
}
.box2 {
background-color: #3498DB;
z-index: 1;
top: 30px;
left: 30px;
}
.box3 {
background-color: #27AE60;
z-index: 3;
top: 60px;
left: 60px;
}
Note:
• .box1 has a z-index of 2, making it appear above .box2. However, .box3 has an even higher z-index, which places it above .box1.
• .box2 has a z-index of 1. Even though it's positioned above .box1 due to its position, it's still behind .box1 in the stacking order because of its lower z-index.
• .box3 has the highest z-index of 3, so it appears on top of both .box1 and .box2.
• .container establishes a stacking context because of its position: relative; property. Elements within this container will be stacked according to their z-index values relative to each other, but they won't interfere with elements outside the container's stacking context.
Remember that stacking context and z-index interactions can become more complex in situations involving nested elements and multiple stacking contexts. This example provides a basic understanding of how the concepts work together.