UPGRADE

Question

任何人都可以解释为什么不透明度对堆叠有任何影响 HTML元素？

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

UPGRADE

请参阅代码段2

为了使z-index具有任何用途，该元素必须具有以下之一：

position:absolute

position:relative

position:fixed

opacity的工作范围为0到1，因此.99是没用的。

<span>个inline元素并且不以任何可辨别的宽度或高度开头，因此为了实际看到任何背景，您需要给它们一些尺寸（即高度和宽度））或内容（即其中的文本）。如果您指定display:inline-block，也会有所帮助，因为处理display:inline并不直观。

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

在Snippet 2中，我制作了一个展示z-index和opacity堆叠关系的互动演示。

SNIPPET 1

＆＃13;

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

＆＃13;

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

＆＃13;

SNIPPET 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案:

UPGRADE

请参阅代码段2