javascript - 将 div 放在两个 div 之间，无需操作 DOM 或使用 z-index

Question

我有一堆 div.page 和 position: fixed 我想在 之间放一个半透明的 div#overlay元素 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>

我知道我可以:

1. 操纵DOM或
2. 对每个 div 应用 z-index 以放置 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);
}

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