受不透明度影响的元素的堆叠顺序 [英] Stacking order of elements affected by opacity

问题描述

在HTML中决定元素的堆叠顺序时， z-index 和 opacity >

当我在元素上保留 opacity 小于 1 有一些 z-index 说 999 。元素落在没有 z-index

c的元素之后。

  $ （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 =checkboxvalue =1>< label for =checkbox1>向绿色框添加不透明度parent< / label>< div id =green-parent> < span class =green>绿色< / span>< / div>< div& < span class =blue>蓝色< / span>< / div>  

解决方案

z-index值不是auto的定位元素和opacity值小于1的元素会生成堆叠上下文。请参阅关于绘画订单的规则。

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

• 与正z-index


• 定位蓝色框与自动 z-index

带有 auto z-index的蓝色框放在后面;

在第二个例子中，我们有：

• 一个具有不透明度的元素（包含绿色框;请注意，绿色框上的z-index将变为此元素的本地元素）


• 没有z-index的定位蓝盒

两个元素属于同一类别（见规则8）。在这种情况下，HTML顺序确定哪个元素出现在前面。蓝色框出现在源订单的后面，因此它显示在前面。

How are z-index and opacity related when deciding stacking order of an element in HTML?

when i keep opacity less than 1 on an element which is having some z-index say 999. The element is going behind the element which is having no 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>

解决方案

Positioned elements with a z-index value other than "auto" and elements with an opacity value less than 1 generate a stacking context. Refer to the rules regarding the painting order.

In your first example we have the root stacking context with various descendants including:

• positioned green box with positive z-index
• positioned blue box with auto z-index

The blue box with auto z-index is placed behind; green box with positive z-index is placed in front (see rule no. 8 and 9).

In your second example we have:

• an element with opacity (which contains green box; note that z-index on the green box becomes local to this element)
• positioned blue box without z-index

Both elements fall under same category (see rule no. 8). In which case the HTML order determines which element appear in front. The blue box appears later in the source order so it appears in front.

这篇关于受不透明度影响的元素的堆叠顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！