Question

我有一堆div.page与position: fixed，我想在div#overlay和其他人之间加一个半透明的Element n。此外，div的数量未知，可以更改。叠加层必须始终位于最顶层的div和其他div之间。

<div class="page">Element 1</div>
<div class="page">Element 2</div>
...
<div class="page">Element n</div>

<div id="overlay"></div>

我知道我可以：

操纵DOM或
将z-index应用于每个div，以便div#overlay到位

两者看起来都不干净。还有其他选择吗？

PS：由于我必须设置div#overlay的不透明度动画，我无法使用:after

Answer 1

前几天我实际上不得不这样做。这就是我的选择（适合您的解决方案）：

HTML：

<div id="stack">
    <div class="page">Element 1</div>
    <div class="page">Element 2</div>
    ...
    <div class="page">Element n</div>
</div>

CSS：

#stack {
    position: fixed;
    top:0; bottom: 0; left: 0; right: 0;
}
#stack > * {
    position: absolute;
    top:0; bottom: 0; left: 0; right: 0;
}
#stack > :last-child {
    background-color: rgba(0, 0, 0, 0.5);
}

这样，它始终是＆＃34;最顶层的＆＃34;覆盖堆栈上获得半透明背景的元素。这里的限制是您只能使用纯色背景，因为您依靠背景颜色的alpha分量而不是opacity属性来实现半透明。

将div放在两个div之间而不操作DOM或使用z-index

1 个答案: