blob: bffd7f94222c4546b91b0ebe5c2c41223b105ccb [file] [log] [blame]
<!DOCTYPE html>
<!--
| This test checks that items with negative z-indices appear underneath
| both elements that are not positioned as well as positioned elements with
| z indices of 0 and greater.
| Of the 5 boxes, red is not positioned, every other box is. The order of
| appearance of the boxes should be grey, black, red, green, blue, from back
| to front.
| https://www.w3.org/TR/CSS21/visuren.html#z-index
-->
<html>
<head>
<style>
.green, .blue, .grey, .black {
position: absolute;
width: 100px;
height: 100px;
}
.red {
width: 100px;
height: 100px;
background-color: rgb(255, 100, 100);
}
.green {
left: 60px;
top: 60px;
background-color: rgb(100, 255, 100);
}
.blue {
left: 80px;
top: 80px;
background-color: rgb(100, 100, 255);
z-index: 1;
}
.grey {
left: 20px;
top: 20px;
background-color: rgb(150, 150, 150);
z-index: -2;
}
.black {
left: 40px;
top: 40px;
background-color: rgb(0, 0, 0);
z-index: -1;
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="black"></div>
<div class="grey"></div>
</body>
</html>