blob: fecd57cbef994f4052aebe07bcdb78c0593ae32b [file] [log] [blame]
<!DOCTYPE html>
<!--
| Relative positioned elements should appear in the correct draw order when
| they have later, absolutely positioned siblings. 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: relative;
left: 0px;
top: 0px;
width: 80px;
height: 80px;
background-color: rgb(15, 157, 88);
}
.blue {
position: absolute;
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"></div>
</div>
</body>
</html>