blob: dc404c81bbea60d778c51a0911d4c89e49dac31d [file] [log] [blame]
<!DOCTYPE html>
<!--
| Stacking contexts are different from containing blocks, and elements of
| differing containing blocks can share the same stacking context. This
| test ensures that elements with differing containing blocks are rendered
| in the correct order according to their mutual stacking context.
| The results should show the blue box infront of all other boxes as it has
| the largest z-index, even though it is a child of another element that does
| not have z-index specified. The gray box containing the blue box should
| appear in the back as it has an implied z-index of 0.
| https://www.w3.org/TR/CSS21/visuren.html#z-index
-->
<html>
<head>
<style>
.red, .green, .blue {
position: absolute;
width: 100px;
height: 100px;
}
.red {
left: 0px;
top: 0px;
background-color: rgb(255, 100, 100);
z-index: 1;
}
.green {
left: 30px;
top: 30px;
background-color: rgb(100, 255, 100);
z-index: 2;
}
.blue {
left: 40px;
top: 40px;
background-color: rgb(100, 100, 255);
z-index: 3;
}
.blue-container {
position: absolute;
left: 20px;
top: 20px;
width: 150px;
height: 150px;
background-color: rgb(100, 100, 100);
}
</style>
</head>
<body>
<div class="blue-container">
<div class="blue"></div>
</div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>