justify-self-static-position-001-ref.html (1783B)
1 <!DOCTYPE html> 2 <style> 3 .block { 4 display: block; 5 width: 80%; 6 height: 80%; 7 border: 5px dotted blue; 8 } 9 10 .container { 11 border: 1px solid; 12 position: relative; 13 display: inline-block; 14 width: 100px; 15 height: 100px; 16 margin-left: 50px; 17 margin-bottom: 50px; 18 } 19 20 .abs { 21 width: 50px; 22 height: 50px; 23 position: absolute; 24 background: purple; 25 } 26 </style> 27 <div class="container"><div class="block"> 28 <div class="abs" style="justify-self: start;"></div> 29 </div></div> 30 <div class="container"><div class="block"> 31 <div class="abs" style="justify-self: start;"></div> 32 </div></div> 33 <div class="container"><div class="block"> 34 <div class="abs" style="justify-self: end;"></div> 35 </div></div> 36 <div class="container"><div class="block"> 37 <div class="abs" style="justify-self: start;"></div> 38 </div></div> 39 <div class="container"><div class="block"> 40 <div class="abs" style="justify-self: start;"></div> 41 </div></div> 42 <div class="container"><div class="block"> 43 <div class="abs" style="justify-self: end;"></div> 44 </div></div> 45 <div class="container"><div class="block"> 46 <div class="abs" style="left: 20px;"></div> 47 </div></div> 48 <div class="container"><div class="block"> 49 <div class="abs" style="left: 20px;"></div> 50 </div></div> 51 <div class="container"><div class="block"> 52 <div class="abs" style="justify-self: start;"></div> 53 </div></div> 54 <div class="container"><div class="block"> 55 <div class="abs" style="justify-self: start;"></div> 56 </div></div> 57 <div class="container"><div class="block"> 58 <div class="abs" style="justify-self: end;"></div> 59 </div></div> 60 <div class="container"><div class="block"> 61 <div class="abs" style="justify-self: start;"></div> 62 </div></div> 63 <div class="container"><div class="block"> 64 <div class="abs" style="justify-self: start;"></div> 65 </div></div>