Why Isn't Z-Index Working

Why does z-index not work?

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

Why isn't z-index working?

Practical answers:

Depending on what you want to achieve (visually) you either have to place the elements to be hidden inside a sibling of their current top level parent or you have to rely on visibility to hide them.

Here is the parent sibling solution:

body{  overflow: hidden;  display: flex;  align-items: center;  justify-content: center;}
.first {  position: absolute;  z-index: 1;  width: 500px;  height: 500px;  background-color: grey;  animation: toggleOpacity 3s infinite;}.another-first {   z-index: 0;}.second {  position: relative;  z-index: 2;  width: 450px;  height: 450px;  top: 25px;  left: 25px;  background-color: orange;  opacity: 0.99;}.third {  position: absolute;  z-index: 3;  width: 400px;  height: 400px;  top: 25px;  left: 25px;  background-color: yellow;  opacity: 0.99;}.fourth {  position: absolute;  z-index: 20;  width: 350px;  height: 350px;  top: 25px;  left: 25px;  background-color: green;  opacity: 0.99;}.fifth {  position: absolute;  z-index: 5;  width: 300px;  height: 300px;  top: 25px;  left: 25px;  background-color: pink;  opacity: 0.99;}@-webkit-keyframes toggleOpacity {  0%   { -webkit-transform: translateX(-150px); transform: translateX(-150px); }  50% { -webkit-transform: translateX(150px); transform: translateX(150px); }  100% {-webkit-transform: translateX(-150px);transform: translateX(-150px);}}@-moz-keyframes toggleOpacity {  0%   { -moz-transform: translateX(-150px); transform: translateX(-150px); }  50% { -moz-transform: translateX(150px); transform: translateX(150px); }  100% {-moz-transform: translateX(-150px);transform: translateX(-150px);}}@-o-keyframes toggleOpacity {  0%   { -o-transform: translateX(-150px); transform: translateX(-150px); }  50% { -o-transform: translateX(150px); transform: translateX(150px); }  100% {-o-transform: translateX(-150px);transform: translateX(-150px);}}@keyframes toggleOpacity {  0%   { -webkit-transform: translateX(-150px); -moz-transform: translateX(-150px); -o-transform: translateX(-150px); transform: translateX(-150px); }  50% { -webkit-transform: translateX(150px); -moz-transform: translateX(150px); -o-transform: translateX(150px); transform: translateX(150px); }  100% {-webkit-transform: translateX(-150px);-moz-transform: translateX(-150px);-o-transform: translateX(-150px);transform: translateX(-150px);}}

<div class="first"></div><div class="another-first">  <div class="second">    <div class="third">      <div class="fourth">        <div class="fifth">        </div>      </div>    </div>  </div></div>

Why isn't z-index working on positioned elements?

You misunderstood z-index. It specifies the index of that element with respect to the stacking context it belongs to.

Precisely, since you use z-index: 2 on the nav, the ul belongs to the stacking context established by the nav!

Remove that z-index to stop the nav from establishing a stacking context, set a negative z-index to the ul, and use non-transparent backgrounds.

Oh, and last year the CSS WD decided that elements with fixed positioning would always establish a stacking context, so use another positioning.

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';.nav-submenu {  top: 20px;  position: absolute;  z-index: -10;}.navitem-left {  position: relative;  float: left;}nav {  height: 72px;  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.10);  padding-top: 30px;  position: absolute;  width: 100%;  background: #fff;}nav ul {  list-style-type: none;  margin: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><nav>  <ul>    <li class="navitem-left">      <a href="#" class="dropdown-toggle" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">CLICK ME!</a>      <ul class="dropdown-menu nav-submenu" aria-labelledby="menu1">        <li>          <a href="#">Why aren't I behind the nav?</a>        </li>      </ul>    </li>  </ul></nav>

Why isn't z-index working here?

Apply z-index: -1; to .webdsn-drop- since it's a child element of #navbuttons-container, you need to use a negative z-index in order to move it behind the parent.

Flexbox, z-index & position: static: Why isn't it working?

Like you wrote in your question, elements do not need to be positioned for z-index to work in a flex container.

Flex items can participate in a z-index stacking order even with position: static, which is not true for other CSS box models (except Grid) where z-index only works on positioned elements.

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except
that order-modified document order is used in place of raw document
order, and z-index values other than auto create a stacking context
even if position is static.

The reason z-index isn't working in your code is that div.header and div.core are not flex items. They are children of body, but body is not a flex container.

In order for z-index to work here, you'll need to apply display: flex to body.

Add this to your code:

body {
    display: flex;
    flex-direction: column;
}

Revised Demo

More details: https://stackoverflow.com/a/35772825/3597276

z-index isn't working for my dropdown menu

Your nav element has position: sticky; but doesn't have any z-index. This means that anything positioned inside it is going to be positioning itself based off of that nav parent. If you add a z-index number higher than any other element on the page to that nav element, your nav will behave as you expect.

To use your example, the red box has z-index: 1;. If you add z-index: 2; to the nav element then your entire navigation will sit above it.

There is no need to have any of the children of nav z-indexed once this fix is in place as the parent element will positioned above everything else on the page already.

Why isn't z-index working here

You need to add this rule:

li img {
    position: relative;
}

Or another value of position, as the definition of z-index says it only works on positioned elements.

z-index not working even with absolute positioning

Here is my solution,

Basically, I had to change your html stucture. Check snippet below

This is required because, first, the

 <div class="backfin-top"></div>
 <div class="backfin-bottom"></div>

will be drawn on screen, and then the fish body will be drawn

In your case placing the fins inside fish body div made z-index useless for placing the fins behind the fish.

In the following example z-index is not required to place the fins behind.

.fish {  margin: auto;  display: block;  margin-top: 5%;  width: 300px;  height: 300px;  position: relative;}
.fish-body {  position: relative;  top: 40%;  left: 23.5%;  background: black;  width: 53%;  height: 45%;  border-radius: 10% 150% 2% 150%;  transform: rotate(142deg);}
.backfin-top {  position: absolute;  top: 38%;  left: -4%;  background: yellow;  width: 33%;  height: 25%;  transform: rotate(217deg);  border-radius: 0% 50% 400% 10%; }
.backfin-bottom {  position: absolute;  bottom: 15%;  right: 70%;  background: yellow;  width: 33%;  height: 25%;  border-radius: 10% 400% 10% 50%;
  transform: rotate(317deg) scale(-1, -1);}

<div class="fish">  <div class="backfin-top"></div>  <div class="backfin-bottom"></div>  <div class="fish-body">  </div></div>

z-index not working with elements whose parents are in fixed position

The simple solution is that what I'm trying to do is simply impassible.

The answer by #Krypton indeed solve this issue by altering the html, however in my situation altering the html order isn't possible.

The order of elements is called the Stacking Order, the stacking order is:

1. If no z-index or position then the stacking order is as the html markup order.

2. All positioned elements (relative, absolute and fixed) appear on top of all none positioned elements (static).

3. z-index works only on positioned elements, and it will create Stacking Context.

Stacking Context

Group of elements with common parent create Stacking Context if one of the next conditions are meet:

1. The root document element (the <html> element).

2. Positioned element with z-index

3. Element with opacity less the 1 (this isn't known by most of web developers)

All the elements in Stacking Context move together in the stacking order,
meaning that if element a inside staking context A, can't be above element b inside staking context B, if the stacking order of B is higher the A,
even if the element 'a' has z-index of a million.

Update: new css roles that create Stacking context: transform, filter, css-region and pages_media.

The order inside the Stacking Context:

1. root element

2. positioned element with negative z-index.

3. none positioned elements in the order of the html markup

4. positioned elements

5. positioned elements with z-index according to the z-index.

• Now back to the question, in this example both the red and the green div create stacking context since they are positioned (fixed) and have z-index.
  
• Both of them have the same z-index (value of 2), therefor there stacking order is the red below the green since this is the order of the html markup.
  
• Now lets look at the pink and the lightgreen elements, the pink is nested inside the red elements and the lightgreen inside the green elements,
  since the red element has lower staking order than the green, all the nested elements inside the red elements appear below all the elements inside the green elements.

To fix this issue we need to create a new element that will create a new stacking context with higher stacking order than the red and the green div and place our popups inside of that elements.

Reference: What No One Told You About Z-Index by Philip Walton:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

backdrop-filter and z-index dosen't works together

If I understand you correctly, just try to add position:relative:

.container {
            width: 600px;
            height: 600px;
            padding: 4rem 15rem;
            background-color: red;
        }

        .box1 {
            height: 200px;
            width: 150px;
            border-radius: 20px;
            background-color: rgba(50, 153, 237, 0.584);
            backdrop-filter: blur(10px);
            margin: 40px -70px;
            padding: 50px;
            display: flex;
            flex: auto;
            float: left;
            justify-content: space-evenly;
            position: relative;
            z-index: auto;
        }
        .box1:hover {
            transform: scale(1.05);
            z-index: 1;
            transition-duration: 0.4s;
            background-color: rgb(228, 234, 239);
            box-shadow: 0px 0px 20px 10px rgba(116, 118, 120, 0.811);
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
</body>

</html>

---

Related Topics