html - 让 div 重叠并固定位置的问题

Question

我正在查看 Cnet 的主页并试图复制其重叠的下拉层。 Click to see their homepage

这到底是怎么做到的？我知道这与固定的中间层以及 z-index 和层之间的高 margin-top 有关，我就是想不通。

有什么想法吗？

#blue, #green, #red {
  height: 500px;
  width: 100%;
}
#blue {
  background: blue;
  z-index: 1;
}
#green {
  background: green;
  position: fixed;
  margin-top: 200px;
}
#red {
  background: red;
  z-index: 1;
  margin-top: 500px;
}

<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>

Answer 1

你是说这样吗？

将非固定 div 上的 position 设置为 static 以外的值，以便 z-index 正常工作。

htmlk, body {
  margin: 0;
}
#blue, #green, #red {
  height: 200px;
  width: 100%;
}
#blue {
  position: relative;
  background: blue;
  z-index: 2;
}
#green {
  background: green;
  position: fixed;
  margin-top: 50px;
  top: 0;
  left: 0;
  z-index: 1;
}
#red {
  position: relative;
  background: red;
  z-index: 2;
  margin-top: 200px;
}

<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>