<!DOCTYPE html>
<!--
 | Like "top", but specifies how far a box's right margin edge is offset to
 | the left of the right edge of the box's containing block. For relatively
 | positioned boxes, the offset is with respect to the right edge of the box
 | itself.
 |   https://www.w3.org/TR/CSS21/visuren.html#position-props
 -->
<html>
<head>
  <style>
    .green {
      background-color: green;
      display: inline-block;
      height: 100px;
      width: 100px;
    }
    .blue {
      background-color: blue;
      display: inline-block;
      height: 100px;
      width: 100px;
    }
    .containing-block {
      position: relative;
      width: 300px;
    }
    .absolutely-positioned {
      position: absolute;
      right: 100px;
    }
    .relatively-positioned {
      position: relative;
      right: -200px;
    }
  </style>
</head>
<body>
  <div class="containing-block">
    <div class="blue absolutely-positioned"></div><div class="green"></div>
  </div>

  <div class="blue relatively-positioned"></div><div class="green"></div>
</body>
</html>