为什么具有最高值的z-index在所有元素上方都没有显示红色框？

Question

我只是想知道为什么具有最高值的z-index不会在其他元素上方显示红色框？

https://jsbin.com/wavagogavi/1/edit?html,css,output

我试图注释掉，例如＃box-2，.box看起来应该是红色的，但是如果我删除注释，它将再次显示绿色框。

<div id="box-01" class="box">#box-01</div>
<div id="box-02" class="box">#box-02</div>
<div id="box-03" class="box">#box-03</div>
<div id="box-04" class="box">#box-04</div>

.box {
  width: 100px;
  height: 100px;
  position: fixed;
  z-index: 5;
  background-color: red;
}

#box-01 {
  background-color: green;
  z-index: 4;
}

#box-02 {
  background-color: yellow;
  z-index: 3;
}

#box-03 {
  background-color: blue;
  z-index: 2;
}

#box-04 {
  background-color: orange;
  z-index: 1;