flexbox-position-absolute-4-ref.xhtml (1172B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Reference case for absolutely positioned flex container & children. --> 7 <html xmlns="http://www.w3.org/1999/xhtml"> 8 <head> 9 <style> 10 div.containingBlock { 11 top: 15px; 12 left: 20px; 13 height: 400px; 14 position: absolute; 15 border: 2px dashed purple; 16 } 17 .abspos { 18 position: absolute; 19 left: 5px; 20 border: 2px dotted black; 21 } 22 div.flexbox { 23 top: 30px; 24 left: 40px; 25 width: 200px; 26 height: 100px; 27 position: absolute; 28 border: 1px solid black; 29 } 30 div.a { 31 width: 30px; 32 height: 100px; 33 background: lightgreen; 34 display: inline-block; 35 } 36 div.b { 37 width: 100%; 38 height: 100px; 39 background: yellow; 40 display: inline-block; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="containingBlock"> 46 <div class="flexbox" 47 ><div class="a abspos"/><div class="b"/></div> 48 </div> 49 </body> 50 </html>