<!DOCTYPE html>
<!--
 | Absolutely positioned elements have their containing blocks set to their
 | first ancestor with a position of 'absolute', 'relative' or 'fixed'.  They
 | should inherit CSS properties from their parent, as usual, even though their
 | percentage-based used values are calculated based on their containing block.
 -->
<html>
<head>
  <style>
    .outer-absolute-block {
      position: absolute;
      font-size: 30px;
      font-weight: bold;
      color: rgb(0, 0, 255);
    }
    .static-block {
      position: static;
      width: 400px;
      height: 400px;
      color: rgb(255, 0, 0);
    }
    .inner-absolute-block {
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="outer-absolute-block">
    <div class="static-block">
      <div class="inner-absolute-block">
        This text should be red.
      </div>
    </div>
  </div>
</body>

</html>