<style>
  body {
    margin-top: 100px;
  }

  div {
    opacity: 0.7;
    border: 4px dotted;
    margin-top: -40px;
    text-align: center;
  }

  .first {
    width: 200px;
    height: 400px;
    position: absolute;
    background: blue;
    z-index: 1;
  }

  .second {
    width: 300px;
    height: 300px;
    position: relative;
    background: red;
    z-index: -1;
  }

  .third {
    width: 400px;
    height: 150px;
    background: green;
    z-index: 2;
  }

  ...
</style>

<div class="first">First element</div>
<div class="second">Second element</div>
<div class="third">Third element</div>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.