blob: 5ba4ab5fb5f81d2b7211bd2f0e41d7643f75c79c [file] [log] [blame]
<!DOCTYPE html>
<!--
| Relative positioned elements should be placed in the correct stacking
| context, even when their containing block is nearer and is an in-flow,
| non-positioned descendants The results should show the blue box in front of
| the green box.
| https://www.w3.org/TR/CSS21/visuren.html#z-index
-->
<html>
<head>
<style>
.container {
position: absolute;
width: 150px;
height: 150px;
background-color: rgb(158, 158, 158);
}
.green {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
height: 80px;
background-color: rgb(15, 157, 88);
}
.blue-container {
position: static;
left: 20px;
top: 20px;
width: 150px;
height: 150px;
}
.blue {
position: relative;
left: 40px;
top: 40px;
width: 80px;
height: 80px;
background-color: rgb(66, 133, 244);
}
</style>
</head>
<body>
<div class="container">
<div class="green"></div>
<div class="blue-container">
<div class="blue"></div>
</div>
</div>
</body>
</html>