z-index 不工作（不堆叠），没有设置背景颜色

Question

问题

有两个 div 并且在滚动时，我们希望一个在下一个下方消失。我们为第一个设置固定位置，为第二个设置相对位置，正确的 z 索引，但在滚动时，它们只是重叠。

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

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

预期行为

滚动时，第一个 div 应该根据 z-index 堆叠规则消失在第二个中。

JSFiddle

https://jsfiddle.net/8mf4opsx/

Answer 1

解决方案

因为第二个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;
}

JSFiddle

https://jsfiddle.net/8mf4opsx/3/