How to get a child element to show behind (lower z-index) than its parent?
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.
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>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>