I have utilized jsfiddle to replicate my problem. My goal is to position .top .inside above .bottom .inside. I am aware that z-index only functions within its respective position type, for example fixed and absolute do not share the same z-index level. However, if both parent elements are fixed with the same z-index, is there a method to arrange the children elements as absolutely positioned with different z-index values depending on which one should appear on top? Even if it requires using jQuery or JavaScript?
Here is the HTML structure:
<body>
<div class="fixed top">
<div class="inside">I am inside a fixed element</div>
</div>
<div class="fixed bottom">
<div class="inside">I am inside a fixed element</div>
</div>
</body>
The corresponding CSS styling is as follows:
.fixed {
margin: auto;
position: fixed;
width: 100%;
z-index: 111;
}
.top {
background: #222;
height: 150px;
top: 0;
}
.bottom {
background: #555;
height: 58px;
top: 100px;
}
.inside {
background: #770000;
margin: auto;
padding: 20px;
position: absolute;
right: 0;
left: 0;
width: 200px;
}
.top .inside {
background: #770000;
top: 70px;
z-index: 999;
}
.bottom .inside {
background: #007700;
z-index: 1;
}