使用不透明度更改堆叠顺序 [英] Using opacity to change the stacking order

问题描述

可以解释为什么不透明度对堆叠
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，它看起来很简单，直到我遇到这个异常，在添加不透明度之后对堆叠顺序没有影响，任何人都可以解释此特定上下文中不透明度的意义？

解决方案

UPGRADE

查看代码段2

• z-index 为任何用途，元素必须具有以下之一：
  
  
  
  
  • position：absolute
  
  
  • position：relative $ b
  • position：fixed
  
  

/ blockquote>

---

• opacity 的范围是0到1，所以有一个.99是无用的。

---

• < span> s inline 元素，并且不以任何可辨别的宽度或高度开始，因此为了实际看到任何背景，您需要给它们一些维度高度和宽度）或内容（即，它们内部的文本）。如果您指定 display：inline-block ，也会有帮助，因为处理 display：inline li>
  

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

在Snippet 2中，我做了一个交互式演示，演示了 z-index 和 opacity 堆叠关系。

SNIPPET 1

  div：first-child {opacity：0.2;}。背景：红色; z-index：1;}。green {position：relative;背景：绿色; margin：20px 0 0 20px;}。blue {position：relative;背景：蓝色; 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>  

SNIPPET 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 broken gray; background：rgba（0，0，0，.2）; text-align：right;} fieldset {width：450px;} div {position：absolute; width：300px; height：150px;}＃A {background：tomato; z指数：10; text-align：left;}＃B {background：cyan; z-index：0; text-align：center;}＃C {background：yellow; z指数：-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>父< / 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>  

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

Relevant part of the CSS Code:

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

Plain HTML:

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

I am learning about z-index, it seemed pretty simple until i encountered this exception where it seems to have no affect on the stacking order after addition of opacity, can anyone explain the significance of opacity in this particular context?

解决方案

UPGRADE

See Snippet 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.

In Snippet 1 I've added the what was previously mentioned in your code.

In Snippet 2 I have made an interactive demo showing z-index and opacity stacking relationship.

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

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

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