align-items-static-position-ref.html (1470B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto"> 4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1930561"> 6 <style> 7 .flex { 8 display: flex; 9 align-items: center; 10 width: 100%; 11 height: 100%; 12 } 13 14 .grid { 15 display: grid; 16 justify-items: center; 17 align-items: center; 18 width: 100%; 19 height: 100%; 20 } 21 22 .container { 23 border: 1px solid; 24 position: relative; 25 width: 100px; 26 height: 100px; 27 display: inline-block; 28 margin-right: 5px; 29 } 30 31 .abs { 32 width: 50px; 33 height: 50px; 34 position: absolute; 35 background: purple; 36 } 37 38 .center-inline { 39 left: 25px; 40 } 41 42 .left { 43 left: 0; 44 } 45 46 .top { 47 top: 0; 48 } 49 50 .center-block { 51 top: 25px; 52 } 53 </style> 54 <div class="container"><div class="flex"> 55 <div class="abs left center-block"></div> 56 </div></div> 57 <div class="container"><div class="flex"> 58 <div class="abs left top"></div> 59 </div></div> 60 <br> 61 <div class="container"><div class="grid"> 62 <div class="abs center-inline center-block"></div> 63 </div></div> 64 <div class="container"><div class="grid"> 65 <div class="abs center-inline top"></div> 66 </div></div> 67 <div class="container"><div class="grid"> 68 <div class="abs left center-block"></div> 69 </div></div> 70 <div class="container"><div class="grid"> 71 <div class="abs left top"></div> 72 </div></div> 73 <br>