position-absolute-containing-block-001.html (768B)
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-001-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: 200px; 17 height: 200px; 18 background: yellow; 19 } 20 21 .child { 22 position: absolute; 23 width: 100px; 24 height: 100px; 25 background: green; 26 } 27 </style> 28 <div class="parent"><div class="child"></div></div>