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