blob: 27788d493a0b3954f04682b6a82cbbac01c6f84c [file] [log] [blame]
<!DOCTYPE html>
<!--
| Stacking contexts are different from containing blocks. This test ensures
| that elements with an 'auto' z-index still use the correct stacking context
| when their containing block is further up the tree than their stacking
| context. The results should show the blue box in front of the gray box.
| https://www.w3.org/TR/CSS21/visuren.html#z-index
-->
<html>
<head>
<style>
.blue-container {
position: absolute;
left: 20px;
top: 20px;
width: 150px;
height: 150px;
z-index: 3;
background-color: rgb(100, 100, 100);
}
.blue {
position: fixed;
left: -20px;
top: -20px;
width: 100px;
height: 100px;
background-color: rgb(100, 100, 255);
}
</style>
</head>
<body>
<div class="blue-container">
<div class="blue"></div>
</div>
</body>
</html>