flexbox-position-absolute-3-ref.xhtml (1038B)
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. --> 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 div.flexbox { 18 top: 30px; 19 left: 40px; 20 width: 200px; 21 height: 100px; 22 position: absolute; 23 border: 1px solid black; 24 } 25 div.a { 26 width: 80px; 27 height: 100px; 28 background: lightgreen; 29 display: inline-block; 30 } 31 div.b { 32 width: 120px; 33 height: 100px; 34 background: yellow; 35 display: inline-block; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="containingBlock"> 41 <div class="flexbox"><div class="a"/><div class="b"/></div> 42 </div> 43 </body> 44 </html>