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.
| 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.
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;
<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>