| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Z-Index and Stacking Context in CSS
What is Z-Index?
The ‘z-index‘ property in CSS controls the vertical stacking order of elements that overlap. An element with a higher ‘z-index‘ value will be rendered in front of an element with a lower ‘z-index‘ value. The ‘z-index‘ property only affects elements that have a ‘position‘ value other than ‘static‘ (i.e., ‘relative‘, ‘absolute‘, ‘fixed‘, or ‘sticky‘).
Stacking Context
A stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user who is viewing the web page. Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.
How a Stacking Context is Created
A stacking context is formed, anywhere in the document, by any element that satisfies one of the following criteria:
- The root element of the document (i.e., the ‘
<html>‘ element). - Any element with a position value other than ‘
static‘ and a ‘z-index‘ value other than ‘auto‘. - Any element with a ‘
position‘ value of ‘fixed‘ or ‘sticky‘. - Elements with certain CSS properties, like ‘
opacity‘ less than 1, ‘transform', ‘filter‘, ‘perspective‘, ‘clip-path‘, ‘mask‘, ‘contain,will-change‘, ‘mix-blend-mode‘, and ‘isolation‘ set to ‘isolate‘.
Examples
Basic Example of Z-Index
Here is a simple example illustrating how ‘z-index‘ works:
<!DOCTYPE html>
<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>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box1 {
background-color: red;
left: 50px;
top: 50px;
z-index: 1;
}
.box2 {
background-color: blue;
left: 100px;
top: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
In this example, the blue box (‘box2‘) will appear in front of the red box (‘box1‘) because it has a higher ‘z-index‘.
Example of Stacking Context
Here is an example to demonstrate the stacking context:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacking Context Example</title>
<style>
.container {
position: relative;
z-index: 1;
width: 200px;
height: 200px;
background-color: yellow;
}
.inner-box {
position: relative;
z-index: 2;
width: 100px;
height: 100px;
background-color: red;
}
.overlay {
position: absolute;
z-index: 3;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: rgba(0, 0, 255, 0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="inner-box"></div>
</div>
<div class="overlay"></div>
</body>
</html>
In this example:
- The ‘
.container‘ div creates a new stacking context because it has a ‘position‘ value of ‘relative‘ and a ‘z-index‘ of 1. - The ‘
.inner-box‘ div, which is a child of ‘.container‘, has a higher ‘z-index‘ of 2, but it is confined within the stacking context of ‘.container‘. - The ‘
.overlay‘ div, which is outside of the ‘.container‘, has the highest ‘z-index‘ of 3, making it appear on top of both the ‘.container‘ and the ‘.inner-box‘.
Key Points to Remember
- Local vs. Global Stacking Contexts: Once a stacking context is created, the ‘
z-index‘ values of its child elements are relative to the stacking context, not to the global document. - Layering within Stacking Contexts: Elements within the same stacking context are layered according to the following rules:
- The background and borders of the element forming the stacking context.
- Descendant elements with negative ‘
z-index‘ values. - Non-positioned, non-float elements.
- Descendant elements with ‘
z-index‘ values of ‘auto‘ or ‘0‘. - Descendant elements with positive ‘
z-index‘ values.
Understanding ‘z-index‘ and stacking context can help you manage overlapping elements effectively, ensuring that the desired elements are visible and correctly layered on your web pages.
