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