blob: bc09c91f6f45c061e1afe8a62b43d6cc496f428f [file] [log] [blame]
<!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>