Using opacity to change the stacking order

Question

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?

http://stackoverflow.com/questions/2837057/what-has-bigger-priority-opacity-or-z-index-in-browsers — Michael Coker, Jan 17 '17 at 02:00

zer00ne · Answer 1 · 2017-01-17T08:27:20.017

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>

Using opacity to change the stacking order

1 Answers1

UPGRADE

See Snippet 2

Linked