flexbox-position-absolute-1.xhtml (1945B)
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 children of a flex container. 8 This positioning is with respect to the containing block's left edge. 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 width: 200px; 27 height: 100px; 28 display: flex; 29 } 30 div.a { 31 flex: 1 0 auto; 32 width: 30px; 33 height: 100px; 34 background: lightgreen; 35 } 36 div.b { 37 flex: 2 0 auto; 38 width: 20px; 39 height: 100px; 40 background: yellow; 41 } 42 div.inflex { 43 flex: none; 44 width: 20px; 45 height: 100px; 46 background: gray; 47 } 48 div.noFlexFn { 49 width: 15px; 50 height: 15px; 51 background: teal; 52 } 53 </style> 54 </head> 55 <body> 56 <div class="containingBlock"> 57 <!-- First child abspos: --> 58 <div class="flexbox"><div class="a abspos"/><div class="b"/></div> 59 <!-- Second child abspos: --> 60 <div class="flexbox"><div class="a"/><div class="b abspos"/></div> 61 <!-- Middle child abspos: --> 62 <div class="flexbox" 63 ><div class="a"/><div class="inflex abspos"/><div class="b"/></div> 64 <!-- Third child abspos, w/ inflexible items & justify-content: space-around: --> 65 <div class="flexbox" style="justify-content: space-around" 66 ><div class="inflex"/><div class="inflex"/><div class="inflex" 67 /><div class="noFlexFn abspos"/><div class="inflex"/></div> 68 </div> 69 </body> 70 </html>