I would like to know if it possible to have a child element behind his parent element with z-index.
I would like to use the parent div as transparent color layer on top of his content.
This is impossible as a child's z-index is set to the same stacking index as its parent. You have already solved the problem by removing the z-index from the parent, keep it like this or make the element a sibling instead of a child.
No, it isn't inherited.
The z-index of elements inside of a stacking context are always relative to the parent's current order in its own stacking context.
Why not? Sure you can, and it's easy:
z-index
of child to -1
;z-index
, opacity
, transforms
or whatelse generates a composite
layer)..container {
position: absolute;
z-index: 0; /* or eg. opacity: 0.99;*/
background-color: blue;
color: lightblue;
width: 100%;
height: 100%;
text-align: center;
}
.parent {
position: relative;
background-color: rgba(100, 255, 150, 0.75);
color: green;
width: 50%;
height: 30%;
top: 30%;
left: 20%;
}
.child {
position: absolute;
z-index: -1;
background-color: orange;
color: yellow;
width: 100%;
height: 100%;
top: -50%;
left: 20%;
}
<div class="container">
<span>container</span>
<div class="parent">
<span>parent</span>
<div class="child">
<span>child</span>
</div>
</div>
</div>
(if the parent is used as a transparent layer, be sure to use a background-image
or rgba background-color
: children inherit the opacity
of the parent)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With