Как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>