css - Stacking order of elements affected by opacity -

how z-index , opacity related when deciding stacking order of element in html?

when keep opacity less 1 on element having z-index 999. element going behind element having no z-index.

$(function() {    $("#checkbox1").on("change", function() {      $("#green-parent").toggleclass("add-opacity", this.checked);    });  });

.green,  .blue {    position: absolute;    width: 100px;    line-height: 100px;    text-align: center;    color: white;  }  .green {    z-index: 999999999;    top: 50px;    left: 50px;    background: green;  }  .blue {    top: 60px;    left: 90px;    background: blue;  }  .add-opacity {    opacity: 0.99;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    <input id="checkbox1" type="checkbox" value="1">  <label for="checkbox1">add opacity green box parent</label>      <div id="green-parent">    <span class="green">green</span>  </div>  <div>    <span class="blue">blue</span>  </div>

positioned elements z-index value other "auto" , elements opacity value less 1 generate stacking context. refer rules regarding painting order.

in first example have root stacking context various descendants including:

• positioned green box positive z-index
• positioned blue box auto z-index

the blue box auto z-index placed behind; green box positive z-index placed in front (see rule no. 8 , 9).

in second example have:

• an element opacity (which contains green box; note z-index on green box becomes local element)
• positioned blue box without z-index

both elements fall under same category (see rule no. 8). in case html order determines element appear in front. blue box appears later in source order appears in front.