html - 使用不透明度更改堆叠顺序

Question

can anyone explain why does opacity have any affect on stacking of html element ?

CSS代码的相关部分:

    div:first-child{
        opacity: 0.99;
    }
    .red{
        background: red;
        z-index: 1;
    }
    .green{
        background: green;
        margin: 20px 0 0 20px;
    }
    .blue{
        background: blue;
        margin: 40px 0 0 40px;
    }

纯 HTML:

<div>
  <span class="red"></span>
</div>
<div>
  <span class="green"></span>
</div>
<div>
  <span class="blue"></span>
</div>

我正在学习 z-index，它看起来很简单，直到我遇到这个异常，它似乎对添加不透明度后的堆叠顺序没有影响，任何人都可以解释不透明度在这个特定上下文中的重要性吗？

Answer 1

升级

参见片段 2

• In order for z-index to be of any use, the element has to to have one of the following:
  • position:absolute
  • position:relative
  • position:fixed

---

• opacity works on a scale of 0 to 1, so having a .99 is useless.

---

• <span>s inline elements and don't start with any discernable width or height, so in order to actually see any background, you need to give them some dimensions (i.e. height and width) or content (i.e. text inside of them). It also helps if you assign display:inline-block because dealing with display:inline isn't intuitive.

在代码片段 1 中，我添加了您之前在代码中提到的内容。

在代码片段 2 中，我制作了一个交互式演示，展示了 z-index和 opacity叠加关系。

片段 1

div:first-child {
  opacity: 0.2;
}
.red {
  position: relative;
  background: red;
  z-index: 1;
}
.green {
  position: relative;
  background: green;
  margin: 20px 0 0 20px;
}
.blue {
  position: relative;
  background: blue;
  margin: 40px 0 0 40px;
}
span {
  display: inline-block;
  width: 100px;
  height: 20px;
}

<div>
  <span class="red"></span>
</div>
<div>
  <span class="green"></span>
</div>
<div>
  <span class="blue"></span>
</div>

片段 2

document.getElementById('rng1').oninput = function() {
  var rad = document.querySelectorAll('.rad:checked')[0];
  var out = rad.nextElementSibling.id;
  document.getElementById(rad.value).style.opacity = this.value;
  document.getElementById(out).value = this.value;
}

#parent {
  position: relative;
  width: 480px;
  height: 200px;
  border: 3px dashed grey;
  background: rgba(0, 0, 0, .2);
  text-align: right;
}
fieldset {
  width: 450px;
}
div {
  position: absolute;
  width: 300px;
  height: 150px;
}
#A {
  background: tomato;
  z-index: 10;
  text-align: left;
}
#B {
  background: cyan;
  z-index: 0;
  text-align: center;
}
#C {
  background: yellow;
  z-index: -10;
  text-align: right;
}
output {
  width: 30px;
  display: inline-block;
}

<section id='parent'>
  <div id='A'>A</div>
  <div id='B'>B</div>
  <div id='C'>C</div>
  Parent
</section>

<form id='ui'>
  <fieldset>
    <label>
      <input id='radA' class='rad' name='rad' type='radio' value='A' checked>A:
      <output id='oA'></output>
    </label>
    <label>
      <input id='radB' class='rad' name='rad' type='radio' value='B'>B:
      <output id='oB'></output>
    </label>
    <label>
      <input id='radC' class='rad' name='rad' type='radio' value='C'>C:
      <output id='oC'></output>
    </label>
    <label>
      <input id='radD' class='rad' name='rad' type='radio' value='parent'>Parent:
      <output id='oD'></output>
    </label>
    <br>
    <label>Opacity
      <input id='rng1' type='range' min='0' max='1' step='.1' value='1'>
    </label>
  </fieldset>
</form>