<div id="one">
  <p title="first paragraph">&nbsp;</p>
</div>

<div id="two">
  <p title="second paragraph">&nbsp;</p>
</div>

<div id="three">
  <p title="third paragraph">&nbsp;</p>
</div>

*{
  box-sizing:border-box;
  padding:0;
  margin:0;
}
body{
  min-height: 200vh;
  /* only to create scrolling on the page */
}
div{
  width:400px;
  height:300px;
  padding:2rem;
}
p:before{
  content: attr(title);
}
#one{
  background-color: #bada55;
  height: 250px;
  width: 300%;
 
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; 
  /*
  this accomplishes the same thing as adding
  position relative to the second and third div 
  */
}
#two{
  background-color: hsla(330, 50%, 50%, 0.5);
  height: 230px;
  /* position:relative; */
}
#three{
  background-color: salmon;
  /* position:relative; 
  try this on the 2nd or 3rd div to see the difference */
}