blob: 1928dd37be7966812d32a52807caf035c467f6cf [file] [log] [blame]
<!DOCTYPE html>
<!--
| Absolutely positioned elements should have their static position set
| to where they would have appeared if they were layed out within their
| containing block. For absolutely positioned elements, their containing block
| is specified to be their first ancestor that has a position of 'absolute',
| 'relative' or 'fixed'. This test ensures that we locate the containing block
| correctly in the case that the ancestor has a position of 'absolute'.
-->
<html>
<head>
<style>
.container-block {
position: absolute;
width: 350px;
height: 350px;
background-color: rgb(255, 50, 50);
}
.static-block1 {
position: static;
width: 30%;
height: 30%;
background-color: rgb(0, 100, 255);
}
.static-block2 {
position: static;
width: 30%;
height: 30%;
background-color: rgb(0, 75, 191);
}
.absolute-block {
position: absolute;
width: 30%;
height: 30%;
background-color: rgb(0, 255, 100);
transform: translateX(125px);
}
</style>
</head>
<body>
<div class="container-block">
<div class="static-block1">
</div>
<div class="static-block2">
<div class="absolute-block">
<div class="static-block1">
</div>
<div class="static-block2">
<div class="absolute-block">
</div>
</div>
</div>
</div>
</div>
</body>
</html>