flex-item-position-relative-001.html (1216B)
1 <!DOCTYPE html> 2 <title>Flex items and `position: relative`</title> 3 <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-position/#position-property"> 5 <meta name="assert" 6 content="Flex items can be positioned with `position: relative` and establish containing blocks for absolutely-positioned descendants." /> 7 <link rel="match" href="flex-item-position-relative-001-ref.html"> 8 9 <style> 10 body { 11 margin: 0; 12 } 13 #flex { 14 display: flex; 15 width: 100px; 16 height: 100px; 17 } 18 19 #flex > div { 20 width: 50px; 21 height: 50px; 22 background: green; 23 position: relative; 24 top: 50px; 25 left: 50px; 26 } 27 #flex > div > div { 28 width: 50px; 29 height: 50px; 30 background: green; 31 position: absolute; 32 left: 100%; 33 top: 100%; 34 } 35 </style> 36 37 <div style="position: absolute; background: red; width: 50px; height: 50px; left: 50px; top: 50px"></div> 38 39 <div style="position: absolute; background: red; width: 50px; height:50px; left: 100px; top: 100px"></div> 40 <div id="flex"> 41 <div><div style="background: green"></div></div> 42 </div>