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.
.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);
<div class="blue-container">
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>