How to Make Child Element Higher Z-Index Than Parent

How to make child element higher z-index than parent?

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.

Z-Index issue with child elements

remove .parent's z-index: 1

.parent{
    position: relative; height: 200px; width: 200px; display: inline-block;
}
.parent:hover .child{
    display: block;
}
.child{
    position: absolute; height: 50px; width: 50px; z-index: 2; display: none;
}

 <div class="parent" style="background-color: hotpink;">Parent 1<div class="child" style="background-color: yellow; margin-left: 180px; margin-top: 50px;">Child 1.1</div></div>
 <div class="parent" style="background-color: green;">Parent 2<div class="child" style="background-color: greenyellow; margin-left: -30px;">Child 2.1</div></div>

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.

stacking with z-index, child element on top over parent sibling

I removed the position absolute from the yellow div and removed the z-index from the green div. Maybe this is something as you said.

.parent {    background-color: yellow;        top: 0;    left: 0;    height: 200px;    width: 200px;    z-index: 1;}.child {    background-color: red;    position: relative;    top: 10px;    left: 20px;    height: 50px;    width: 150px;    z-index: 2;}.other-guy {    background-color: green;    position: absolute;    top: 40px;    left: 100px;    height: 200px;    width: 200px;    }

<div class="parent">Chillin in the background    <div class="child">I really want to be on top.</div></div><div class="other-guy">I want to be in the middle!</div>

How to Make Child Element Higher Z-Index Than Parent