blob: 72c477ae5bb5834e2c4a9bc0f4576a696df2010e [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".
| https://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: 40px;
}
.level-4 {
background-color: #0091ea;
height: 120px;
width: 120px;
}
.topleftquadrant {
left: 0px;
top: 0px;
width: 25%;
height: 25%;
}
.bottomrightquadrant {
right: 0%;
bottom: 0%;
width: 25%;
height: 25%;
}
.bottomrightextended {
right: -25%;
bottom: -25%;
width: 50%;
height: 50%;
}
.absolutely-positioned.level-4 {
background-color: #01579b;
}
.absolutely-positioned.level-5 {
background-color: #0277bd;
}
.zindex {
z-index: -1;
}
</style>
</head>
<body>
<div class="absolutely-positioned level-1">
<div class="absolutely-positioned level-2">
<div class="level-3">
<div class="level-4"></div>
<div class="absolutely-positioned topleftquadrant level-4">
<div class="absolutely-positioned bottomrightextended level-5"></div>
</div>
<div class="absolutely-positioned bottomrightquadrant level-4">
<div class="absolutely-positioned bottomrightextended level-5 zindex"></div>
</div>
</div>
</div>
</div>
</body>
</html>