Open In App

Why Does z-index Not Work with Fixed Positioning in CSS ?

Last Updated : 11 Sep, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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.

Screenshot-2023-06-04-085851.png

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:

Screenshot-2023-05-29-175501.png



Similar Reads

Why Transition properties does not work with display properties ?
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not
2 min read
Why does CSS work with fake elements ?
CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page. In this article, we a
2 min read
Primer CSS Layout Sidebar Positioning
Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. In this article, we'll see about Layout Sidebar positioning. We can chang
2 min read
Foundation CSS Dropdown Positioning
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS.
3 min read
Foundation CSS Dropdown Explicit Positioning
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS.
4 min read
Foundation CSS Tooltip Explicit Positioning
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler
3 min read
Foundation CSS Forms Label Positioning
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
4 min read
Foundation CSS Prototyping Utilities Positioning
A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It’
3 min read
Primer CSS Layout Sidebar positioning as rows
Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. In this article, we'll see about the Layout of Sidebar positioning as row
2 min read
Explain the scenario to use translate instead of absolute positioning in CSS
In web development, there are several CSS properties that are used to position and manipulate elements on a webpage. Two of the most commonly used properties are translate() and absolute positioning. While both properties can be used to achieve similar results, there are scenarios where one property may be a better option than the other. The purpos
5 min read