Why Does Z-Index: -1; Appear Above Z-Index: 1;

Why does z-index: -1; appear above z-index: 1;?

Setting a positioned element's z-index to anything other than auto (the initial value) causes the element to generate a new stacking context for its descendant boxes.

This prevents any of its descendants from appearing below it, including the div:before pseudo-element, even if their z-index is negative. Of course, any descendant with a negative z-index will continue to appear below a descendant with a zero or positive z-index within the containing element, but that containing element will always be at the very back.¹

The rest of your div elements that don't have a z-index set will use the initial value instead, and therefore not generate stacking contexts for their pseudo-elements, allowing the pseudo-elements to appear below the real elements. The stacking context in which they are drawn instead is that of body.

---

¹ _{Note that the content of a stacking context root will still appear above the background of a descendant with a negative z-index. This is intentional, and is covered in greater detail in this answer, with relevant links to the spec.}

Z-index not making an element appear above others

Try

<button type="button" class="btn btn-info btn-lg" style="z-index: 1051;position: relative;" data-toggle="modal" data-target="#myModal">Open Modal</button>

The model has z-index: 1050, so the button must have a higher z-index.
By default a button has position: static;.
Z-index only works on positioned elements (position:absolute, position:relative or position:fixed).

Why does the browser render the body behind elements with a negative z-index?

First, default z-index is auto and not 0. There is a difference because the last one will create a stacking context making the element inside it (even with negative z-index) to always be rendred above. More details here: Why can't an element with a z-index value cover its child?

Then you are facing background propagation which is a special behavior when setting background color to body element which will make you think that the element is not behind.

Then your image is set to position:absolute making it out of the flow thus it won't affect the height of the body so even if it's behind we can still see it.

Here is some examples to illustrate different cases:

body {

  position: relative;

  background-color: #000;

}

img {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

}

h1 {

  margin: 0;

  background-color: rgba(255, 255, 255);

  padding: 0.5em 1em;

  text-align: center;

  font-size: 2.5rem;

}

<main>

  <h1>A polar bear</h1>

  <pre>

  </pre>

</main>

<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Polar_Bear_AdF.jpg" alt="A Polar Bear">

Why element with z-index 0 is shown above element with z-index 1

Because a position and z-index on the parent starts a new stacking order. Specifically position: fixed on the first element. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

A stacking context is formed, anywhere in the document, by any element in the following scenarios:

...

Element with a position value "fixed" or "sticky" (sticky for all mobile browsers, but not older desktop).

So the child z-index of the first div is relative to the parent, not the rest of the document.

In this example, you want to apply z-index to the parent instead.

<div style="position: fixed; z-index: 1;">
  <div id="AAA" style="position: absolute; background-color: green; z-index: 1">AAA</div>
</div>
<div style="position: relative;">
  <div id="BBB" style="position: absolute; background-color: red; z-index: 0">BBB</div>
</div>

css z-index issue with nested elements

Don't specify any z-index to .bank to avoid creating new stacking context and simply adjust the z-index of the other elements. This will work because all the 3 elements belong to the same stacking context so you can specify any order you want.

.bank {

  position:relative;

  background: red;

  width: 500px;

  height: 200px;

}

.card {

  position: absolute;

  top:0;

  z-index: 2;

  height: 100px;

  width: 400px;

  background: blue;

}

.button {

  position: absolute;

  top: 0;

  z-index: 1;

  height: 150px;

  width: 450px;

  background: yellow;

}

.container {

  position: relative;

}

<div class="container">

  <div class="bank">

    <div class="card"></div>

  </div>

  <div class="button"></div>

</div>

Z-index below text but above background

The reason this is occurring, is because there is a child and a parent. If you set a z-index on the parent, the child is going to be the same, since the z-index is stacked.

Thus, by setting a z-index of 1 on the parent, the child is now also 1.

It is systematically impossible for the child to be behind the parent, as that doesn't make any sense. However, the text is a sibling of the child. By setting a z-index of -1 on the child, there is essentially no effect between the child and the parent, however since the sibling is effected, the child now goes behind the sibling.

Using z-index but text still not coming in front

Add z-index:3 and position:relative to .content.

.parallax { 

    background: url("https://www.lincoln.ac.uk/home/media/responsive2017/studywithus/internationalstudents/gatewayToEurope_1500x996px-min.jpg") center center no-repeat; 

    background-attachment: fixed;

    background-size: cover;

    height: 100%;

}

.bg-tint {

position: relative;

  }

 .bg-tint:before {

  content: "";

  display: block;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(56,56,56, 0.9);

  transition: all .3s linear;

  z-index: 2;

}

.bg-tint .content  {

position:relative;

 z-index: 3;

}

.bg-tint .content h2 {

}

<div class="parallax bg-tint">

<div class="content">

 <h3 style="padding-top:200px; padding-bottom: 200px;font-weight: 400; font-size: 64px; color:white;">Covering your location!</h3>

 <p>We cover most English speaking countries, including yours!</p>

</div>

</div>

Why does position:relative; appear to change the z-index?

You need to refer to the specification and more precisely the painting order to understand when each layer is painted.

Without position:relative your element is not positioned and will be painted at the step (4):

4. For all its in-flow, non-positioned, block-level descendants in tree
   order: If the element is a block, list-item, or other block
   equivalent:

Then we paint the positioned elements (including the .mask) at the step (8)

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories

---

Now when you add position:relative you make the container also positioned thus it will fall in the step (8) too and as described there we consider the tree order since both don't have any z-index specified. So the .container will painted later in this case.

If you change the order of the element (you make the container before the mask) you will notice that position:relative won't have any effect because in both cases the painting order will be the same:

body {
  margin: 0;
  font-family: arial;
}
section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
    no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.container {
  position: relative; /* you can remove this*/
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}

<section>
  <div class="container">
    <h1>Hello World</h1>
  </div>
  <div class="mask"></div>
</section>

---

Related Topics