div 的不透明度会产生意想不到的结果并将内容与图像混合

Question

有人能解释一下为什么以下 sn-p 中的第二个和第三个 div 似乎与图像融合了吗？为了清楚起见，这里的问题是关于为什么内容元素的不透明度似乎会影响图层顺序。

图片是没有透明度的动画 gif。在上部 div 中，一切似乎都按预期运行。图像旋转，白色背景阻挡了其下方 div 的文本内容。

在较低的两个 div 中，我降低了不透明度，并且不知何故这会产生文本叠加在图像上的效果 。这在第三个 div 中进一步说明，我在包装器上设置了背景颜色。整件事让我感到困惑和意外。

div.wrapper {
  position: relative;
  padding: 15px;
  border: 1px solid #ddd;
}
img.loader {
  position: absolute;
  left: calc(50% - 32px);
  top: calc(50% - 32px);
}
div.content-b,
div.content-c {
  opacity: .5;
}
div.wrapper-c {
  background-color: #bbb;
}

<div class="wrapper">
  <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
  <div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
<div class="wrapper">
  <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
  <div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>
<div class="wrapper wrapper-c">
  <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
  <div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
</div>

Answer 1

您应该为 img 提供更高的 z-index，然后让它高于一切。

z-index：9999；

如果不透明度小于 1 的元素未定位，则实现必须在其父堆叠上下文中绘制它创建的层，其堆叠顺序与它是带有 'z 的定位元素时使用的堆叠顺序相同-index：0'和'不透明度：1'。

Answer 2

沿z 轴 规则的堆叠说明：

1. 兄弟姐妹的顺序 - 首先考虑到的顺序

2. 定位兄弟元素堆叠在static元素之上 - 所以img理想情况下应该在div之上。

3. 影响堆栈上下文的其他属性（如position）包括opacity、transform。

查看MDN: stacking context的这些摘录

在文档中的任何位置，任何元素都可以形成堆叠上下文 要么是

• 根元素 (HTML)，

• 使用除“auto”以外的 z-index 值（绝对或相对）定位，

• 一个z-index值不是“auto”的flex项，即父元素显示：flex|inline-flex，

• 不透明度值小于 1 的元素。（请参阅不透明度规范），

• 变换值不是“none”的元素，

• 混合模式值不是“正常”的元素，

• 过滤值不是“none”的元素，

• 透视值不是“none”的元素，

• 隔离设置为“隔离”的元素，

• 位置：固定

• 在 will-change 中指定上面的任何属性，即使您没有直接为这些属性指定值（参见这篇文章）

• 将 -webkit-overflow-scrolling 设置为“触摸”的元素

您可以通过将img 放在div 下方修复它 - 请参阅下面的演示：

div.wrapper {
  position: relative;
  padding: 15px;
  border: 1px solid #ddd;
}
img.loader {
  position: absolute;
  left: calc(50% - 32px);
  top: calc(50% - 32px);
}
div.content-b,
div.content-c {
  opacity: .5;
}
div.wrapper-c {
  background-color: #bbb;
}

<div class="wrapper">
  
  <div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
  <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
<div class="wrapper">

  <div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
<div class="wrapper wrapper-c">

  <div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>