blob: 158ef8accb3a3832d1366b557a2302a1657c1e6c [file] [log] [blame]
<!DOCTYPE html>
<!--
| If the element has "position: absolute", the containing block is established
| by the padding edge of the nearest ancestor with a "position" of "absolute".
| http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
-->
<html>
<head>
<style>
body {
margin: 0px;
}
.absolutely-positioned {
position: absolute;
}
.level-1 {
background-color: #b3e5fc;
padding: 10px;
}
.level-2 {
background-color: #40c4ff;
padding: 20px;
}
.level-3 {
background-color: #00b0ff;
padding: 30px;
}
.level-4 {
background-color: #01579b;
height: 60px;
width: 60px;
}
.topleft {
left: 100%;
top: 100%;
width: 25%;
height: 25%;
}
</style>
</head>
<body>
<div class="absolutely-positioned level-1">
<div class="level-2">
<div class="level-3">
<div class="absolutely-positioned topleft level-4"></div>
</div>
</div>
</div>
</body>
</html>