CodePen

HTML

            
              <div class="fixed">
  <div class="overlayA">beneath content</div>
  <div class="overlayB">above content</div>
</div>
<div class="content">content<br>goes<br>here</div>
            
          
!
via HTML Inspector

CSS

            
              div {
  width: 300px;
}
.fixed {
  position:fixed;
}
.overlayA {
	background-color: rgba(255, 0, 0, 0.8);
	position: absolute;
	top: 0px;
	z-index: 1;
}
.overlayB {
	background-color: rgba(0, 255, 0, 0.8);
	position: absolute;
	top: 30px;
	z-index: 3;
}
.content {
	background-color: rgba(0, 0, 255, 0.8);
	position: absolute;
	z-index: 2;
  height: 200%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................