Why does using z-index:-1 on an absolutely positioned child element make it go under the grandparent div? How can I ensure that the absolute-child stays under the parent div instead?
.grandparent{
background:rgba(0, 128, 0, 0.89);
width:500px;
}
.parent{
position:relative;
width:200px;
height:200px;
background:yellow;
}
.absolute-child{
position:absolute;
width:100px;
height:100px;
background:red;
top:10px;
right:-50px;
z-index:-1;
} <div class="grandparent">
<div class="parent">
<div class="absolute-child"> absolute ch
</div>
<div class="siblings">siblings</div>
</div>
</div