如何z-index与opacity决定在HTML堆叠元素的订单时，有关系吗？

当我保持opacity小于1由具有一些元件上z-index的发言权999。元素落后于没有元素的元素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 to green box parent</label>





<div id="green-parent">

  <span class="green">Green</span>

</div>

<div>

  <span class="blue">Blue</span>

</div>