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.
.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;
<div class="level-1 absolute">
<div class="level-2">
<div class="level-3 absolute"></div>
<div class="level-3"></div>