Question

在决定HTML中元素的堆叠顺序时，z-index和opacity如何相关？

当我将opacity小于1的元素z-index说999时。该元素位于没有z-index的元素后面。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

除了opacity stacking context Alexey Ten在his comment中指出（这是一个因素），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>

Answer 2

定位元素的z-index值不是＆＃34; auto＆＃34;并且不透明度值小于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 个答案: