In the current setup, it seems that .second needs to be positioned above .third, which is only happening in Firefox. Unfortunately, I am facing difficulty as I cannot separate .second from .fifth.
Just to provide some context: .third is intended to act as a modal background to darken the content of .fifth and the footer .fourth. The actual content of the modal is within .second. This Web App is specifically designed for Safari on iPad.
<div class="first">&l;/div>
<div class="fifth">
<div class="second">I should be on top.</div>
</div>
<div class="third"></div>
<div class="fourth"></div>
.first{
z-index: 10;
/* styling */
position: fixed; top: 0; left: 0; right: 0; height: 50px; background: lightblue;
}
.second{
z-index: 9;
/* styling */
position: fixed; top: 100px; left: 50px; right: 50px; bottom: 100px; background: darkseagreen;
}
.third{
z-index: 8;
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1);
}
.fourth{
z-index: 7;
/* styling */
position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: indianred;
}
.fifth{
/*styling*/
position: fixed; top: 50px; left: 0; right: 0; bottom: 50px; background: darkgrey;
}