视差效果：一个 div 覆盖另一个 div？

问题描述

我的 HTML 代码如下所示：

<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>

我希望第二个 <div> b 出现在 <div> a 之上，以及 <div> 和 id {{1 }} 出现在 d <div> 之上。两个分区大小相同，我尝试在第一个c position:fixed 中添加top:0 和<div> 但是没有得到我想要的效果，第一个{每次出现 id 时都会重复 {1}}。我知道这个问题来自 <div> 并且我不知道如何解决它（使第一个 <div> 在每次滚动后不重复，而是获得所有分区的视差效果）。

我针对我的问题做了一个演示：http://jsfiddle.net/1g8sLnfk/5/

解决方法

使用 position: absolute 而不是 position:fixed

html,body {
  padding:0;
  margin:0;
  background:black;
}

.panels {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
}

#a{
  background-image:url("https://www.w3schools.com/css/img_lights.jpg");    
  color:red;
  top:0;
  background-attachment: fixed;
  z-index: 1;
}

#b{  
  background:yellow;
  top: 100vh;
  z-index: 2;
}

#c{
   background:pink;
   top: 200vh;
   z-index: 3;
}

#d{  
  background:green;
  top: 300vh;
  z-index: 4;  
}

<div id="wrapper">
    <div id="a" class="panels">FIXED PANEL</div>
    <div id="b" class="panels">Scrolling-Panel 1</div>
    <div id="c" class="panels">Scrolling-Panel 2</div>
    <div id="d" class="panels">Scrolling-Panel 3</div>
</div>

html parallax