<!DOCTYPE html>
<!--
 | If "position" has the value "absolute", display is set according to the table
 | below:
 |     Specified value       Computed value
 |     ====================  =================
 |     inline, inline-block  block
 |     others                same as specified
 |   https://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
 -->
<html>
<head>
  <style>
    body {
      font-family: Roboto;
      font-size: 30px;
      font-weight: bold;
    }
    .absolutely-positioned {
      position: absolute;
    }
    .containing-block {
      width: 500px;
    }
    .block,
    .inline,
    .inline-block {
      margin: 0 auto;
      width: 400px;
    }
    .block {
      background-color: #40c4ff;
      display: block;
    }
    .inline {
      background-color: #00b0ff;
      display: inline;
    }
    .inline-block {
      background-color: #0091ea;
      display: inline-block;
    }
    .absolutely-positioned.block {
      top: 40px;
    }
    .absolutely-positioned.inline {
      top: 80px;
    }
    .absolutely-positioned.inline-block {
      top: 120px;
    }
  </style>
</head>
<body>
  <div class="containing-block">
    <div class="block">Hello, world!</div>
    <div class="inline">Hello, world!</div>
    <div class="inline-block">Hello, world!</div>
  </div>
  <div class="absolutely-positioned containing-block">
    <div class="absolutely-positioned block">Hello, world!</div>
    <div class="absolutely-positioned inline">Hello, world!</div>
    <div class="absolutely-positioned inline-block">Hello, world!</div>
  </div>
</body>
</html>