<!DOCTYPE html>
<!--
 | When a relatively positioned element is overconstrained because left and
 | right are both specified, left wins (if the 'direction' property is set to
 | 'ltr', if it is 'rtl' then right wins).  When top and bottom are specified,
 | top wins.
 |   https://www.w3.org/TR/CSS21/visuren.html#relative-positioning
 -->
<html>
<head>
  <style>
    .box {
      width: 50px;
      height: 50px;

      background-color: rgb(100, 100, 255);
    }

    .position-relative {
      position: relative;
      left: 25px;
      top: 25px;
      right: 10px;
      bottom: 10px;
      direction: ltr;
      background-color: rgb(255, 100, 100);
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="box position-relative"></div>
  <div class="box"></div>
</body>
</html>