blob: e06c01ed05cbba59e17fbf0130dc62c10a2e647d [file] [log] [blame]
<!DOCTYPE html>
<!--
| If the element has "position: fixed", the containing block is established
| by the padding edge of the nearest ancestor with a transform.
| https://www.w3.org/TR/CSS21/visudet.html#containing-block-details
| NOTE: While this is not explicitly stated in the spec, which states that
| the containing block of a fixed position element must always be the viewport
| this is how all major browsers handle them.
-->
<html>
<head>
<style>
body {
margin: 0px;
}
.fixed-positioned {
position: fixed;
}
.transformed {
transform: rotate(0deg);
}
.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;
}
.top {
top: 0;
width: 60px;
height: 60px;
}
.fixed-positioned.level-4 {
background-color: #01579b;
}
</style>
</head>
<body>
<div class="fixed-positioned transformed level-1">
<div class="fixed-positioned transformed level-2">
<div class="level-3">
<div class="level-4"></div>
<div class="fixed-positioned top level-4"></div>
</div>
</div>
</div>
</body>
</html>