受不透明度影响的元素的堆叠顺序答案

【问题标题】：Stacking order of elements affected by opacity受不透明度影响的元素的堆叠顺序
【发布时间】：2015-05-12 08:12:31
【问题描述】：

在决定 HTML 中元素的堆叠顺序时，z-index 和 opacity 有什么关系？

当我在具有一些z-index 的元素上保持opacity 小于1 时说999。该元素在没有z-index 的元素后面。

$(function() {
  $("#checkbox1").on("change", function() {
    $("#green-parent").toggleClass("add-opacity", this.checked);
  });
});

.green,
.blue {
  position: absolute;
  width: 100px;
  line-height: 100px;
  text-align: center;
  color: white;
}
.green {
  z-index: 999999999;
  top: 50px;
  left: 50px;
  background: green;
}
.blue {
  top: 60px;
  left: 90px;
  background: blue;
}
.add-opacity {
  opacity: 0.99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="checkbox1" type="checkbox" value="1">
<label for="checkbox1">Add opacity to green box parent</label>


<div id="green-parent">
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

【问题讨论】：

HTML 和 CSS 是两个完全不同的东西。不要把两者混为一谈。这个问题是关于 CSS 的，正如标签中正确说明的那样。
opacity 小于 1 会创建新的堆叠上下文。见 MDN developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
我不太明白你的问题或问题？

标签： css z-index

【解决方案1】：

z-index 值不是“auto”的定位元素和不透明度值小于 1 的元素会生成堆叠上下文。参考rules regarding the painting order。

在您的第一个示例中，我们有包含各种后代的根堆叠上下文，包括：

具有正 z-index 的定位绿色框
用auto z-index 定位蓝色框

带有auto z-index 的蓝色框放在后面；带有正 z-index 的绿色框放在前面（参见规则 8 和 9）。

在您的第二个示例中，我们有：

具有不透明度的元素（其中包含绿色框；请注意，绿色框上的 z-index 成为该元素的局部）
没有 z-index 的定位蓝色框

这两个元素属于同一类别（参见规则 8）。在这种情况下，HTML 顺序决定了哪个元素出现在前面。蓝色框出现在源顺序的后面，所以它出现在前面。

【讨论】：

【解决方案2】：

除了his comment 中指出的opacity stacking context Alexey Ten（这是这里的一个因素）之外，z-index 与元素的容器相关。在这种情况下，您的蓝色和绿色元素都包含在单独的 div 父级中，它们没有定义 z-index。由于 HTML 排序，后一个div（带有蓝色框的那个）会出现在前一个（绿色那个）之上。

在下面的示例中，我将.first 类添加到第一个父类div 和.second 到第二个父类，然后给它们自己的z-index 属性。

.green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.green {
  z-index:999999999;
  top: 90px;
  left: 60px;
  background: green;
}
.gp{
  opacity:0.99;
}
.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

.first, .second {
  position: relative;
}

.first {
  z-index: 2;
}

.second {
  z-index: 1;
}

<div class="first">
  <span class="green">Green</span>
</div>
<div class="second">
  <span class="blue">Blue</span>
</div>

【讨论】：