无需操作DOM或使用z-index，在固定定位div间放置半透明overlay

这里有个完全靠CSS就能实现的方案，不管你的.page元素怎么动态增减，都能自动把#overlay卡在最顶层的.page和其余.page之间，完全不用写JS操作DOM或者逐个给元素设z-index：

核心思路 #

利用CSS伪类选择器区分最后一个.page和其他.page，通过控制z-index的层级关系，让overlay刚好卡在中间层级：

• 让除了最后一个之外的所有.page处于较低层级
• 给#overlay设置中间层级
• 让最后一个.page处于最高层级

代码实现 #

首先是你的HTML结构（无需改动）：

<div class="page">Element 1</div>
<div class="page">Element 2</div>
<!-- 动态添加的更多.page元素 -->
<div class="page">Element n</div>
<div id="overlay"></div>

然后是CSS：

/* 统一设置所有.page的基础fixed样式 */
.page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 给前n-1个page设置基础z-index */
  z-index: 10;
}

/* 让最后一个.page的层级最高，确保它在overlay之上 */
.page:last-child {
  z-index: 30;
}

/* 配置overlay的样式和层级 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色示例 */
  /* 层级介于前n-1个page和最后一个page之间 */
  z-index: 20;
}

为什么这个方案能生效？ #

1. 所有.page都是position: fixed，属于同一个层叠上下文，z-index的数值直接决定层级高低
2. .page:last-child会自动匹配最后一个（也就是原本最顶层的）页面，给它设置比overlay更高的z-index，确保它能覆盖overlay
3. 其他.page的z-index比overlay低，所以会被overlay覆盖
4. 不管后续新增或删除多少个.page，CSS伪类会自动更新匹配的元素，完全不需要额外维护

如果你的.page原本已经有z-index设置，只需要调整这三个数值的相对大小就行（比如把10改成100，20改成200，30改成300），只要保证page:last-child > overlay > 其他page的层级关系就ok。

内容的提问来源于stack exchange，提问作者Tonald Drump