flex-item-z-ordering-001.html (1531B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: z-index on non-positioned flex-items</title> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#painting"> 4 <link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=91405"> 5 <link rel="match" href="reference/flex-item-z-ordering-001-ref.html"> 6 <meta name="assert" content="z-index on non-positioned flex-items works."> 7 <style> 8 .flex-item { 9 width: 50px; 10 height: 50px; 11 } 12 .positioned { 13 position: absolute; 14 left: 25px; 15 height: 25px; 16 width: 50px; 17 } 18 </style> 19 <div>The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div> 20 <div style="position:relative"> 21 <div style="display:flex;"> 22 <div class="flex-item" style="z-index: 1; background-color: salmon;"></div> 23 <div class="flex-item" style="z-index: 100; background-color: orange;"></div> 24 </div> 25 <div class="positioned" style="top: 0; z-index: 150; background-color: green"></div> 26 <div class="positioned" style="top: 25px; z-index: 50; background-color: purple"></div> 27 </div> 28 <div style="position:relative"> 29 <div style="display:flex;"> 30 <img class="flex-item" style="z-index: 1; background-color: salmon;"></img> 31 <img class="flex-item" style="z-index: 100; background-color: orange;"></img> 32 </div> 33 <img class="positioned" style="top: 0; z-index: 150; background-color: green"></img> 34 <img class="positioned" style="top: 25px; z-index: 50; background-color: purple"></img> 35 </div>