blob: e4a4014bf7240339dbd1970e82dc8c58462f6257 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Absolutely positioned elements should be rendered after static elements
| are rendered.
-->
<html>
<head>
<style>
.containing-block1 {
position: absolute;
}
.containing-block2 {
position: absolute;
transform: translateX(75px);
}
.first-static-box {
width: 50px;
height: 50px;
background-color: rgb(255, 100, 0);
}
.second-static-box {
width: 50px;
height: 50px;
background-color: rgb(100, 255, 0);
}
.absolute-box1 {
position: absolute;
width: 25px;
height: 100px;
transform: translateY(-100px);
background-color: rgb(0, 100, 255);
}
.absolute-box2 {
position: absolute;
width: 25px;
height: 100px;
background-color: rgb(0, 100, 255);
}
</style>
</head>
<body>
<!-- Here the absolute box is declared after the static boxes -->
<div class="containing-block1">
<div class="first-static-box"></div>
<div class="second-static-box"></div>
<div class="absolute-box1"></div>
</div>
<!-- Here the absolute box is declared before the static boxes -->
<div class="containing-block2">
<div class="absolute-box2"></div>
<div class="first-static-box"></div>
<div class="second-static-box"></div>
</div>
</body>
</html>