html - z-index 不起作用（未堆叠），没有设置背景颜色

Question

问题

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

#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/

标签： htmlcssz-index

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/