将div重叠并定位固定的问题

Question

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

这究竟是怎么做到的？我知道这与中间层定位固定，然后z-index和层之间的高margin-top有关，我无法弄明白。

有什么想法吗？

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的意思是这样吗？

将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; }才能正常使用。

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;