<!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>