堆叠上下文：绝对定位和浮动

Question

This MDN article解释了堆叠上下文和浮动。以下是他们提供的示例：

div {
  font: 12px Arial;
}
span.bold {
  font-weight: bold;
}
#absdiv1 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 10px;
  right: 140px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
#normdiv {
  /* opacity: 0.7; */
  height: 100px;
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin: 0px 10px 0px 10px;
  text-align: left;
}
#flodiv1 {
  opacity: 0.7;
  margin: 0px 10px 0px 20px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #009900;
  background-color: #ccffcc;
  text-align: center;
}
#flodiv2 {
  opacity: 0.7;
  margin: 0px 20px 0px 10px;
  float: right;
  width: 150px;
  height: 200px;
  border: 1px dashed #009900;
  background-color: #ccffcc;
  text-align: center;
}
#absdiv2 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 100px;
  top: 130px;
  left: 100px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

<br />
<br />

<div id="absdiv1">
  <br /><span class="bold">DIV #1</span>
  <br />position: absolute;
</div>

<div id="flodiv1">
  <br /><span class="bold">DIV #2</span>
  <br />float: left;
</div>

<div id="flodiv2">
  <br /><span class="bold">DIV #3</span>
  <br />float: right;
</div>

<br />

<div id="normdiv">
  <br /><span class="bold">DIV #4</span>
  <br />no positioning
</div>

<div id="absdiv2">
  <br /><span class="bold">DIV #5</span>
  <br />position: absolute;
</div>

在示例中，div#1应属于类别5（后代定位元素），div#3应属于类别3（浮动块）。因此div#1应该超过div#3。为什么它在示例中如下？

Answer 1

堆叠顺序和不透明度

堆叠顺序受opacity属性的影响。这在article you linked to中注明：

  

注意：在下面的示例中，除了未定位的块之外的所有块都是半透明的，显示堆叠顺序。如果非定位块（DIV＃4）的不透明度降低，则会发生奇怪的事情：该块的背景和边框在浮动块上方弹出，但仍位于定位块下方。我无法理解这是一个错误还是对规范的特殊解释。 （应用不透明度可能会隐式创建堆叠上下文。）

测试这个理论

让我们减少标记，使其仅包含两个div。这是我们看到的情景;绝对定位的div1位于div3下方：

＆＃13;

＆＃13;

div {
  padding: 20px;
}
#div1 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 100px;
  left: 50px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
#div3 {
  opacity: 0.7;
  margin: 0px 20px 0px 10px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #009900;
  background-color: #ccffcc;
  text-align: center;
}

＆＃13;

<div id="div1">
  DIV #1
  <br>position: absolute;
</div>



<div id="div3">
  DIV #3
  <br>float: right;
</div>

＆＃13;

＆＃13;

＆＃13;

现在，让我们删除opacity属性（特别是div3上的属性）。堆叠顺序现在正如您所期望的那样：

＆＃13;

＆＃13;

div {
  padding: 20px;
}
#div1 {
  /*opacity: 0.7;*/
  position: absolute;
  width: 150px;
  height: 200px;
  top: 100px;
  left: 50px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
#div3 {
  /*opacity: 0.7;*/
  margin: 0px 20px 0px 10px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #009900;
  background-color: #ccffcc;
  text-align: center;
}

＆＃13;

<div id="div1">
  DIV #1
  <br>position: absolute;
</div>



<div id="div3">
  DIV #3
  <br>float: right;
</div>

＆＃13;

＆＃13;

＆＃13;

了解更多

Here is an in-depth write-up了解opacity属性如何影响堆叠顺序。