flexbox-position-absolute-4.xhtml (1220B)
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 <!-- 7 Testcase with absolutely positioned flex container & children. 8 The children's positioning is with respect to the flex container. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <style> 13 div.containingBlock { 14 top: 15px; 15 left: 20px; 16 height: 400px; 17 position: absolute; 18 border: 2px dashed purple; 19 } 20 .abspos { 21 position: absolute; 22 left: 5px; 23 border: 2px dotted black; 24 } 25 div.flexbox { 26 top: 30px; 27 left: 40px; 28 width: 200px; 29 height: 100px; 30 display: flex; 31 position: absolute; 32 border: 1px solid black; 33 } 34 div.a { 35 flex: 1 0 auto; 36 width: 30px; 37 height: 100px; 38 background: lightgreen; 39 } 40 div.b { 41 flex: 2 0 20px; 42 height: 100px; 43 background: yellow; 44 } 45 </style> 46 </head> 47 <body> 48 <div class="containingBlock"> 49 <div class="flexbox"><div class="a abspos"/><div class="b"/></div> 50 </div> 51 </body> 52 </html>