flexbox-items-as-stacking-contexts-003-ref.html (1529B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <style> 11 .flexContainer { 12 background: orange; 13 width: 70px; 14 height: 20px; 15 padding: 2px; 16 margin-bottom: 2px; 17 } 18 .item1 { 19 display: inline-block; 20 background: lightblue; 21 width: 30px; 22 height: 16px; 23 padding: 2px; 24 margin-right: 2px; 25 vertical-align: top; 26 } 27 .item2 { 28 display: inline-block; 29 background: yellow; 30 width: 30px; 31 height: 16px; 32 padding: 2px; 33 vertical-align: top; 34 } 35 .grandchildA { 36 background: purple; 37 width: 80px; 38 height: 6px; 39 position: relative; 40 z-index: 10; 41 } 42 .grandchildB { 43 background: teal; 44 width: 80px; 45 height: 6px; 46 position: relative; 47 z-index: 20; 48 } 49 .grandchildC { 50 background: lime; 51 width: 20px; 52 height: 16px; 53 position: relative; 54 /* This z-index should interleave this content 55 between grandchildA and grandchildB: */ 56 z-index: 15; 57 } 58 </style> 59 </head> 60 <body> 61 <div class="flexContainer" 62 ><div class="item1" 63 ><div class="grandchildA"></div 64 ><div class="grandchildB"></div 65 ></div 66 ><div class="item2" 67 ><div class="grandchildC"></div 68 ></div 69 ></div> 70 </body> 71 </html>