flex-item-z-ordering-002.html (880B)
1 <!DOCTYPE html> 2 <title>Flex painting order with z-index</title> 3 <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#painting"> 5 <meta name="assert" 6 content="z-index works on flex items even though they do not have `position: relative`" /> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 9 <style> 10 #flex { 11 display: flex; 12 width: 100px; 13 height: 100px; 14 } 15 16 #flex > div { 17 width: 0px; 18 height: 0px; 19 } 20 #flex > div > div { 21 width: 100px; 22 height: 100px; 23 } 24 </style> 25 26 <p>Test passes if there is a filled green square and <strong>no red</strong>. 27 </p> 28 29 <div id="flex"> 30 <div><div style="background: green"></div></div> 31 <div style="z-index: -10"><div style="background: red;"></div></div> 32 </div>