<div class="white fixed">div1
    <div class="red sticky"> div2 </div>
  </div>
  <div class="white absolute">div3
    <div class="green fixed"> div4 </div>
  </div>
  <p style="height: 900px;"></p>
  <p>END</p>
 div {
      font-family: Arial, Helvetica, sans-serif;
      border: solid 2px black;
      box-shadow: 3px 3px 4px gray;
      background-color: rgba(255, 255, 255, 0.4);
      margin: 2px;
      top: 150px;
      left: 150px;
      display: block;
    }

    .white {
      width: 150px;
      height: 150px;
    }

    .red {
      background-color: red;
      width: 50px;
      height: 60px;
    }

    .green {
      background-color: green;
      width: 60px;
      height: 50px;
    }

    .relative {
      position: relative;
    }

    .absolute {
      position: absolute;
    }

    .fixed {
      position: fixed;
    }

    .sticky {
      position: sticky;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.