I have a unique setup with two parent elements, one black and one red. Each parent element contains its own child element - the black parent has a gray div child, while the red parent has a pink div child.
There are some constraints to consider:
- I am not allowed to alter the relationship between the child and its parent element, meaning I can't move a child outside of its parent.
- The red div must remain positioned beneath the black div.
The question at hand is: Can I rearrange the positioning so that the pink div appears above the gray div?
.parent-black {
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, .9);
color: white
}
.child-gray {
width: 250px;
height: 90px;
background-color: gray;
position: absolute;
right: 137px;
top: 20px;
z-index: 0;
color: white;
}
.parent-red {
width: 100%;
height: 40px;
background-color: red;
position: absolute;
top: 40px;
z-index: -999;
}
.child-pink {
width: 95%;
height: 80px;
background-color: pink;
top: 30px;
left: 20px;
position: absolute;
z-index: 9999;
}<div class="parent-red">
2
<div class="child-pink">2.1</div>
</div>
<div class="parent-black">
1
<div class="child-gray">1.1</div>
</div>