blob: 68bf697fe1f50f9f2458a85dcb270cd78324d514 [file] [log] [blame]
<!DOCTYPE html>
<!--
| This test checks that a fixed position element's stacking context is set to
| its closest ancestor that establishes a stacking context (which in this case,
| is NOT its containing block).
-->
<html>
<head>
<style>
.absolute-container {
position: absolute;
width: 200px;
height: 200px;
background-color: rgb(255, 100, 100);
z-index: 3;
}
.absolute-element-1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 20px;
background-color: rgb(255, 255, 100);
z-index: 1;
}
.absolute-element-2 {
position: absolute;
width: 100px;
height: 100px;
top: 70px;
left: 40px;
background-color: rgb(255, 100, 255);
z-index: 4;
}
.fixed-element {
position: fixed;
width: 100px;
height: 100px;
top: 40px;
left: 70px;
background-color: rgb(100, 100, 255);
z-index: 2;
}
</style>
</head>
<body>
<div class="absolute-container">
<div class="absolute-element-1"></div>
<div class="absolute-element-2"></div>
<div class="fixed-element"></div>
</div>
</body>
</html>