HTML同级overlay div遮挡内容文本的原因及透显实现方法

渲染行为成因 #

该现象由CSS默认堆叠规则决定：

• 未主动设置position属性（即默认值static）、未触发层叠上下文的普通块级元素，在同一父级的层叠上下文中，堆叠顺序与DOM书写顺序完全一致：后定义的元素会覆盖在先定义的元素上层。
• 场景1中，overlay节点书写在内容容器example-container之前，内容容器层级默认高于overlay，因此内部文本可以正常显示在overlay上方。
• 场景2中，overlay节点书写在内容节点child1之后，overlay默认层级高于内容节点，因此背景色会直接遮挡下方文本。

场景2透显下方文本的解决方案 #

可根据业务场景选择以下方案：

• 方案1：降低overlay的堆叠层级
  给overlay设置相对定位+负z-index，只要overlay的父元素没有创建独立层叠上下文，overlay就会被放置到父级所有普通内容的下层，不会遮挡文本。
  示例代码：

.overlay {
  position: relative;
  z-index: -1;
}

• 方案2：保留overlay背景效果同时透出内容
  将overlay的背景色设置为带透明度的RGBA值，同时添加pointer-events: none属性，既可以透出下方文本，也不会拦截下层内容的鼠标交互事件。
  示例代码：

.overlay {
  background-color: rgba(0,0,0,0.3); /* 可自定义颜色和透明度 */
  pointer-events: none;
}

• 方案3：调整DOM书写顺序
  如果业务逻辑允许，将overlay节点移动到所有需要显示在它上层的内容节点之前，符合默认堆叠规则即可无需额外CSS修改。

内容的提问来源于stack exchange，提问作者Praveen.R