blob: 5dc2629804e79c715be02296abd380f5b33c45e7 [file] [log] [blame]
<!DOCTYPE html>
<!--
| The percentage is calculated with respect to the width of the generated box's
| containing block. This is true for "margin-top" and "margin-bottom" as well.
| https://www.w3.org/TR/CSS21/box.html#margin-properties
-->
<html>
<head>
<style>
.absolute {
position: absolute;
}
.level-1 {
background-color: #00b0ff;
height: 100px;
width: 200px;
}
.level-2 {
background-color: #1de9b6;
height: 200px;
width: 100px;
}
.level-3 {
background-color: #00bfa5;
display: inline-block;
margin: 100%;
height: 100px;
width: 100px;
}
.level-3.absolute {
background-color: #0091ea;
}
</style>
</head>
<body>
<div class="level-1 absolute">
<div class="level-2">
<div class="level-3 absolute"></div>
<div class="level-3"></div>
</div>
</div>
</body>
</html>