Last Updated : 11 Sep, 2023
Comments
Improve
In this article, we will see why does z-index not work with fixed positioning. The problem mainly is when an element has fixed positioning it doesn’t get under another element with default positioning with an even higher z-index.
This happens because when an element has a fixed positioning, it is removed from the document’s usual flow and placed relative to the browser window rather than the element it is contained within. A new stacking context is created for an element and its descendants when a fixed location is applied to it.
Example: In the example, we will see the h3 has a fixed positioning and the box has static positioning.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Offset a background image
from the right using CSS
</title>
<style>
h3 {
position: fixed;
z-index: 1;
}
.container {
padding: 2rem;
display: flex;
flex-direction: row;
}
.box {
width: 250px;
height: 250px;
border: 1px solid black;
justify-content: center;
}
.box1 {
bottom: 5rem;
background-color: rgb(247, 247, 247, 0.8);
z-index: 20;
margin-top: -2rem;
}
p {
margin: 0 15px;
padding: 100px 0px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
Offset a background image
from the right using CSS
</h3>
<div class="container">
<div style="bottom: 2rem;">
<div class="box box1">
<p>Box 1 (This has static position)
<br>
(z-index = 20)
</p>
</div>
</div>
</div>
</body>
</html>
Output: In the above example, we have seen that the z-index of the box is higher than the h3 but due to the fixed positioning h3 is stacking out of that box.
Approach
To solve this error, we can set the position of the element which we want to be at the top to relative. We set to relative positioning because elements with relative positioning are positioned within their normal flow of the document and do not create a new stacking context. So when the position of the elements other than the fixed-positioned element is set to relative the z-index starts working regularly.
Syntax:
div{
position: relative;
/* Write other rules here */
}
Example 1: This example demonstrates the approach where we use the property position: relative to solve the z-index problem.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Offset a background image from
the right using CSS
</title>
<style>
h3 {
position: fixed;
z-index: 1;
}
.container {
padding: 2rem;
display: flex;
flex-direction: row;
}
.box {
width: 250px;
height: 250px;
border: 1px solid black;
justify-content: center;
}
.box1 {
bottom: 5rem;
background-color: rgb(247, 247, 247, 0.8);
z-index: 20;
margin-top: -2rem;
}
.box2 {
bottom: 2rem;
position: relative;
margin-left: 5rem;
z-index: 20;
background-color: rgb(247, 247, 247, 0.8);
}
p {
margin: 0 15px;
padding: 100px 0px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
Offset a background image from
the right using CSS
</h3>
<div class="container">
<div style="bottom: 2rem;">
<div class="box box1">
<p>Box 1 (This has static position)
<br>
(z-index = 20)
</p>
</div>
</div>
<div>
<div class="box box2">
<p>Box 2 (This has relative position)
<br>
(z-index = 20)
</p>
</div>
</div>
</div>
</body>
</html>
Output:
In the above example, <h3> having the title of the article has a fixed positioning and the first box has default static positioning and the second box has relative positioning. You can see that despite having the same z-index(greater than that of the <h3>) the first box is staying behind where the second one stays over the <h3>:
Example 2: The example demonstrates how the property position: relative to solves the z-index problem even when the elements are added inside a flexbox.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Why does z-index not work
with fixed positioning?
</title>
<style>
.container {
padding: 2rem;
display: flex;
flex-direction: row;
}
.box {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: rgb(247, 247, 247, 0.8);
}
.box-m {
position: fixed;
z-index: 1;
margin-left: 8rem;
background-color: rgba(58, 164, 0, 0.8);
color: white;
}
.box1 {
z-index: 20;
}
.box2 {
position: relative;
margin-left: 5rem;
z-index: 20;
}
p {
margin: 0 15px;
padding: 50px 0px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
Why does z-index not work
with fixed positioning?
</h3>
<div>
<div class="box box-m">
This Box is outside Flexbox.
<br>
<br>
Fixed position
</div>
</div>
<div class="container">
<div style="bottom: 2rem;">
<div class="box box1">
<p>Box 1 (This has static position)
<br>
(z-index = 20)
</p>
</div>
</div>
<div>
<div class="box box2">
<p>Box 2 (This has relative position)
<br>
(z-index = 20)
</p>
</div>
</div>
</div>
</body>
</html>
Output:
priyanshuchatterjee01
Improve
Next Article
How CSS Positioning and Flexbox Work?
