html - Parallax effect: one div over another div?

Question

My HTML code look like this:

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

I want the second <div> b to appear on top of the <div> a, and the <div> with id d to appear on top of <div> c. The two divisions are the same size, I tried to add position:fixed and top:0 in the first <div> id but I don't get the effect I want, the first <div> is repeated every time a <div> goes on top. I know that this issue comes from position:fixed and I don't know how to fix it(to make the first <div> don't repeat after every scroll but to get the parallax effect for all divisions).

I made a demo with my issue: http://jsfiddle.net/1g8sLnfk/5/

Answer 1

Use position: absolute instead of 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>