blob: 3cd40de4fca98ad8c9ab8aee88968dd9a213c4c0 [file] [log] [blame]
<!DOCTYPE html>
| This test ensures that a fixed position element forms a stacking context.
| While this is not explicitly required in the spec, it matches the
| functionality of Chrome, Firefox, Edge, and Safari (IE and old versions of
| Opera do not treat it as a stacking context). The results should show the
| blue box in front of the green box.
.fixed-container {
position: fixed;
width: 150px;
height: 150px;
background-color: rgb(158, 158, 158);
.green {
position: absolute;
left: 0px;
top: 0px;
width: 80px;
height: 80px;
z-index: 1;
background-color: rgb(15, 157, 88);
.blue {
position: absolute;
left: 40px;
top: 40px;
width: 80px;
height: 80px;
background-color: rgb(66, 133, 244);
<div class="fixed-container">
<div class="green"></div>
<div class="blue"></div>