position-absolute-containing-block-002.html (1030B)
1 <!doctype html> 2 <title>CSS Test: Absolutely positioned children of flex container with CSS align</title> 3 <meta charset="utf-8"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1386654"> 6 <link rel="match" href="position-absolute-containing-block-002-ref.html"> 7 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 8 <style> 9 .parent { 10 position: fixed; 11 top: 0; 12 left: 0; 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 width: 180px; 17 height: 180px; 18 19 /* Expand the background area to 200px, without touching the content-box, 20 which is what flex absolute children should be aligned relative to. */ 21 border-top: 5px solid yellow; 22 padding-top: 15px; 23 border-left: 5px solid yellow; 24 padding-left: 15px; 25 26 background: yellow; 27 } 28 29 .child { 30 position: absolute; 31 width: 100px; 32 height: 100px; 33 background: green; 34 } 35 </style> 36 <div class="parent"><div class="child"></div></div>