基本上 .second
必须高于 .third
。不过,这仅在 Firefox 中。不幸的是,我无法将 .second
从 .fifth
中移出,这就是为什么它给我带来如此困难的原因。
更多信息:.third
应该是模态背景,使内容 .fifth
和页脚 .fourth
变暗。模态内容是 .second
。该网络应用程序应该适用于 iPad 上的 Safari。
<div class="first"></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;
}
最佳答案
给 .fifth
一个大于 .third
的 z-index
。
.first{
z-index: 10;
/* styling */
position: fixed; top: 0; left: 0; right: 0; height: 50px; background: lightblue;
}
.second{
z-index: 9; /* You probably do not need this */
/* 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{
z-index: 9;
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 50px; background: darkgrey;
}
<div class="first"></div>
<div class="fifth">
<div class="second">I should be on top.</div>
</div>
<div class="third"></div>
<div class="fourth"></div>
关于html - Chrome/Safari 和 Firefox 中的 z-index 问题(嵌套元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31945648/