| <!DOCTYPE html> |
| <style> |
| .flex-item { |
| width: 50px; |
| height: 50px; |
| } |
| .positioned { |
| position: absolute; |
| left: 25px; |
| height: 25px; |
| width: 50px; |
| } |
| </style> |
| <div>This tests that z-index on non-positioned flex-items works. The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div> |
| <div style="position:relative"> |
| <div style="display:flex;"> |
| <div class="flex-item" style="z-index: 1; background-color: salmon;"></div> |
| <div class="flex-item" style="z-index: 100; background-color: orange;"></div> |
| </div> |
| <div class="positioned" style="top: 0; z-index: 150; background-color: green"></div> |
| <div class="positioned" style="top: 25px; z-index: 50; background-color: purple"></div> |
| </div> |
| <div style="position:relative"> |
| <div style="display:flex;"> |
| <img class="flex-item" style="z-index: 1; background-color: salmon;"></img> |
| <img class="flex-item" style="z-index: 100; background-color: orange;"></img> |
| </div> |
| <img class="positioned" style="top: 0; z-index: 150; background-color: green"></img> |
| <img class="positioned" style="top: 25px; z-index: 50; background-color: purple"></img> |
| </div> |
