opacity 影响层级的原因

在 CSS 中，<opacity>属性用于控制元素的透明度。然而，透明度也会影响元素在页面上的层级顺序。

在给定的示例中，<div>元素具有 z-index: 1 的层级，而 <div> 元素内部的 <div> 元素没有设置 z-index。因此，内部元素应在外部元素之上。但实际上，当内部元素设置了 50% 的透明度后，它却位于外部元素之下。

这一现象是由 CSS 的设计决定的。MDN 文档解释称：“具有非整数透明度值得元素会显示为一个新堆叠上下文，并且总是显示在其父堆叠上下文之上，因此它会在父元素及其所有子元素的上方。”

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

也就是说，具有透明度的元素会创建一个新的“堆叠上下文”。在这个新的堆叠上下文中，元素的层级顺序由其 z-index 值决定。而外部元素及其子元素则处于另一个堆叠上下文中，因此内部元素的透明度会导致它显示在外部元素的上方。

替代解决方案

如果需要控制元素的层级顺序，可以在不使用透明度的情况下使用定位。例如，可以将内部元素设置为 position: absolute，然后使用 top 或 bottom 属性将其定位在外部元素上方。