Using z-index to get div above another div

Question

I want the div1 to be above div2. I try with z-index but it does not work.

I've tried this code:

div {
  width: 100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 1;
}
.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 2
}

<div class="div1"></div>
<div class="div2"></div>

Answer 1

You can add position: relative to both divs and create stacking context

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}

<div class="div1"></div>
<div class="div2"></div>

Or you could use transform-style: preserve-3d; so now .div1 should be positioned in the 3D-space and not flattened in the plane.

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  transform-style: preserve-3d;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

You can also use some random transform like translate or rotate

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  transform: translate(1px);
}

.div2 {
  background: blue;
  transform: translate(1px, -15vh);
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

Filters also work but they have bad Support

div {
  width:100px;
  height: 100px;
}

.div1 {
  background: red;
  filter: brightness(0.4);
  z-index: 2;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  filter: brightness(0.4);
  z-index: 1;
}

<div class="div1"></div>
<div class="div2"></div>

Answer 2

In many cases an element must be positioned for z-index to work.

Indeed, applying position: relative to the divs in the question would solve the z-index problem.

Actually, position: fixed, position: absolute and position: sticky will also enable z-index, but those values also change the layout. With position: relative the layout isn't disturbed.

Essentially, as long as the element isn't position: static (the default value) it is considered positioned and z-index will work.

---

Some answers here and in related questions assert that z-index works only on positioned elements. As of CSS3, this is no longer true.

Elements that are flex items or grid items can use z-index even when position is static.

From the specs:

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.

5.4. Z-axis Ordering: the z-index property

The painting order of grid items is 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.

Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/

Answer 3

z-index only applies to elements with a position other than static, so for example: relative, absolute, or fixed.

div {
  width:100px;
  height: 100px;
  position:relative;
}
.div1 {
  background: red;
  z-index: 2;
}
.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1
}

<div class="div1"></div>
<div class="div2"></div>

Answer 4

The default property for div is position:static, Add position:relative in both the div then only z-index will work.