How to get a child element to show behind (lower z-index) than its parent?

Solution 1:

If the elements make a hierarchy, it cannot be done that way, because every positioned element creates new stacking context, and z-index is relative to the elements of the same stacking context.

Solution 2:

You can do this in modern browsers now using transform 3D with CSS. It wasn't really possible in 2010 but it is now.

.parent {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.child {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px)
}

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

Solution 3:

I figured out a way to actually put the child element behind its element by creating a pseudo-element which mimics the parent. Useful for stuff like dropdown-menus - hope it helps, user from eight years ago!

div {
	 position: relative;
}
 .container > div {
	 float: left;
	 background-color: red;
	 width: 150px;
	 height: 50px;
	 z-index: 10;
}
 .container > div:before {
	 content: '';
	 display: block;
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 background-color: red;
	 z-index: 7;
	 top: 10px;
}
 .a > .b, .b > .a {
	 z-index: 5;
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 background-color: teal;
}
 .a + .b {
	 margin-left: 20px;
}
 

<div class="container">
  <div class="a">
    <div class="b"></div>
  </div>

  <div class="b">
    <div class="a"></div>
  </div>
</div>

Solution 4:

The answer for the question

How to get a child element to show behind (lower z-index) than its parent?

is to:

• Make the parent not a stacking context
• Make the child a positioned stacking context, whose z-index smaller than 0.

Notice: I said make the child a positioned stacking context, not just stacking context, because pay attention that z-index will only be valid for positioned element)

About how an element is considered a stacking context, read this, and how an element is considered a positioned element, read this. Or a great explanation from this answer.

Conclusion:

• Make sure the parent is not a stacking context
• Make sure the child is a stacking context
• Make sure the child's z-index is smaller than 0
• Make sure the child is a positioned element so that the z-index from last step is applicable

Yet you have to understand 2 terms stacking context and positioned element

Solution 5:

I've had success using the following.

z-index: -1;