我有几个部分有 CSS 问题。第一部分是我需要一个绝对定位的 :after 元素在固定位置元素上方可见。第二部分是我需要能够有一个模式作为将覆盖整个屏幕的固定元素的子元素。这是我的应用程序的简化版本。
HTML
<body>
<div class='header'></div>
<div class='nav'></div>
<div class='content'>
<div class='modal'></div>
</div>
<div class='footer'></div>
</body>
CSS
.header {
position: fixed;
height: 50px;
width: 100%;
}
.nav {
position: fixed;
top: 50px;
height: calc(100vh - 100px);
width: 100px;
z-index: 1;
}
.nav:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
margin: auto;
height: 0;
border-left: solid 10px black;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
}
.content {
position: fixed;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
代码笔:https://codepen.io/winterblack/pen/ypBOqz
我可以在我的内容元素上有一个 z-index: -1，或者在我的导航元素上有一个 z-index: 1。无论哪种方式，它都会妨碍模态，而模态必须将内容元素作为其父元素。
我现在能想到的最好的解决方案是在内容元素上使用 z-index: -1 ，并在模式打开时将其删除。这将产生奇怪的效果，即在模式打开时绝对元素消失......可能没什么大不了的，但并不理想。还有其他想法吗？
最佳答案
如果您将 content 的位置更改为 relative，这是否是您正在尝试的妥协？
.content {
position: relative;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
background: aquamarine;
}
关于css - 逃避 z-index 的堆叠上下文，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47746004/