<!DOCTYPE html>
<!--
 | Absolutely positioned elements should not participate in layout and therefore
 | if multiple absolutely positioned objects are defined under the same parent,
 | they should all have the same static position set on them.
 -->
<html>
<head>
  <style>
    .block1 {
      position: absolute;
      width: 50px;
      height: 50px;
      transform: translateX(100px);
      background-color: rgb(255, 0, 0);
    }
    .block2 {
      position: absolute;
      width: 50px;
      height: 50px;
      transform: translateY(100px);
      background-color: rgb(0, 255, 0);
    }
    .block3 {
      position: absolute;
      width: 50px;
      height: 50px;
      transform: translateX(100px) translateY(100px);
      background-color: rgb(0, 0, 255);
    }
    .block4 {
      width: 50px;
      height: 50px;
      background-color: rgb(255, 0, 255);
    }
  </style>
</head>
<body>
  <div class="block1">
  </div>

  <div class="block2">
  </div>

  <div class="block3">
  </div>

  <div class="block4">
  </div>
</body>
</html>