<!DOCTYPE html>
<!--
 | Elements that have the transform property defined on them should appear
 | infront of standard flow elements.
 -->
<html>
<head>
  <style>
    .containing-block1 {
      position: absolute;
    }
    .containing-block2 {
      position: absolute;
      transform: translateX(75px);
    }

    .first-static-box {
      width: 50px;
      height: 50px;
      background-color: rgb(255, 100, 0);
    }
    .second-static-box {
      width: 50px;
      height: 50px;
      background-color: rgb(100, 255, 0);
    }
    .transform-box1 {
      width: 25px;
      height: 100px;
      transform: translateY(-100px);
      background-color: rgb(0, 100, 255);
    }
    .transform-box2 {
      width: 25px;
      height: 100px;
      transform: translateY(100px);
      background-color: rgb(0, 100, 255);
    }
  </style>
</head>

<body>
  <!-- Here the transform box is declared after the static boxes -->
  <div class="containing-block1">
    <div class="first-static-box"></div>
    <div class="second-static-box"></div>
    <div class="transform-box1"></div>
  </div>

  <!-- Here the transform box is declared before the static boxes -->
  <div class="containing-block2">
    <div class="transform-box2"></div>
    <div class="first-static-box"></div>
    <div class="second-static-box"></div>
  </div>

</body>

</html>