<!DOCTYPE html>
<!--
 | When an inline box contains an in-flow block-level box, the inline box
 | (and its inline ancestors within the same line box) are broken around
 | the block-level box (and any block-level siblings that are consecutive
 | or separated only by collapsible whitespace and/or out-of-flow elements),
 | splitting the inline box into two boxes (even if either side is empty), one
 | on each side of the block-level box(es). The line boxes before the break
 | and after the break are enclosed in anonymous block boxes, and
 | the block-level box becomes a sibling of those anonymous boxes.
 |   https://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level
 -->
<html>
<head>
  <style>
    body {
      color: #fff;
      font-family: Roboto;
      font-size: 100px;
      font-weight: bold;
    }
    .level-1 {
      background-color: #40c4ff;
    }
    .level-2 {
      background-color: #00b0ff;
      /* TODO: When such an inline box is affected by relative positioning, any
       *       resulting translation also affects the block-level box contained
       *       in the inline box.
       * left: 300px;
       * position: relative;
       */
    }
    .level-3 {
      background-color: #0091ea;
    }
  </style>
</head>
<body>
  <span class="level-1">
    I
    <span class="level-2">
      II
      <div class="level-3">III</div>
      II
    </span>
    I
  </span>
</body>
</html>