I'm having an issue with positioning in CSS. I want to place the .sibling-child element above the .parent element without changing the current z-index values. Is there a way to accomplish this?
Check out my jsfiddle demonstrating the problem: http://jsfiddle.net/8hb6xgLj/1/
.parent {
width: 300px;
height: 100px;
background: #333;
position: relative;
z-index: 10;
}
.child {
top: 60px;
position: absolute;
width: 50px;
height: 80px;
background: red;
}
.sibling {
width: 300px;
height: 100px;
background: #ccc;
position: relative;
z-index: 9;
}
.sibling-child {
top: 10px;
position: absolute;
width: 70px;
height: 80px;
background: blue;
}<div class="parent">
<div class="child">
</div>
</div>
<div class="sibling">
<div class="sibling-child">
</div>
</div>