Html z索引不工作（未堆叠），未设置背景色 问题

有两个div和滚动条，我们希望其中一个消失在下一个div下。我们为第一个设置了固定的位置，相对于第二个，设置了正确的z索引，但在滚动上，它们只是重叠

#first {
  height: 300px;
  position: fixed;
  top: 30px;
  z-index: 0;
}

#second {
  position: relative;
  height: 800px;
  margin-top: 200px;
  z-index: 1;
}

预期行为 在滚动时，根据z索引堆叠规则，第一个div应该消失在第二个div中

JSFIDLE

解决方案 因为第二个div没有默认的背景颜色集，所以背景是透明的，可以看到第二个div

解决方案是在第二个div中添加白色背景

#first {
  height: 300px;
  position: fixed;
  top: 30px;
  z-index: 0;
}

#second {
  position: relative;
  height: 800px;
  margin-top: 200px;
  z-index: 1;
  background-color: white;
}

JSFIDLE