| <!DOCTYPE html> |
| <title>CSS Flexbox: z-index on non-positioned flex-items</title> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#painting"> |
| <link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=91405"> |
| <link rel="match" href="reference/flex-item-z-ordering-001-ref.html"> |
| <meta name="assert" content="z-index on non-positioned flex-items works."> |
| <style> |
| .flex-item { |
| width: 50px; |
| height: 50px; |
| } |
| .positioned { |
| position: absolute; |
| left: 25px; |
| height: 25px; |
| width: 50px; |
| } |
| </style> |
| <div>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> |