| <!DOCTYPE html> | |
| <title>Fixed position and stacking context</title> | |
| <!--Fixed position elements do not establish stacking contexts by default according to the spec. However, some ports, including the Mac port, have changed this behavior and fixed position elements DO create a stacking context. The results are expected to differ on different ports depending on which behavior is being used.--> | |
| <style> | |
| div { | |
| height: 100px; | |
| width: 100px; | |
| margin: 0; | |
| padding: 0; | |
| top: 0; | |
| left: 0; | |
| position:fixed; | |
| } | |
| .red { | |
| position:fixed; | |
| background: red; | |
| z-index: 1; | |
| } | |
| .green { | |
| position:fixed; | |
| background: green; | |
| z-index: 2; | |
| } | |
| </style> | |
| <div class="red"></div> | |
| <div class="container"> | |
| <div class="red"></div> | |
| <div class="green"></div> | |
| </div> |