CodePen

HTML

            
              <div class="container">
  <div class="green"></div>
  <div class="pink"></div>
  <div class="fixed">
    <div class="orange"></div>
  </div>
</div>
<div class="container" style="left: 300px">
  <div class="green"></div>
  <div class="pink"></div>
  <div class="fixed" style="left: 340px; opacity: 0.99">
    <div class="orange"></div>
  </div>
</div>
<div style="display:block; position:absolute; height:5000px">
</div>

            
          
!

CSS

            
              div { width: 100px; height: 100px;  }
.container {
  position: absolute;
  top: 0px;
  left: 0px;
}
.green {
  position: relative;
  left: 20px;
  top: 20px;
  background-color: green;
  z-index: 1;
}
.pink {
  position: relative;
  left: 80px;
  top: 0px;
  background-color: pink;
  z-index: 3;
}
.fixed {
  position: fixed;
  left: 40px;
  top: 40px;
  background-color: blue;
}
.orange {
  background-color: orange;
  position: relative;
  top: 20px;
  left: 20px;
  z-index: 2;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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