align-self-static-position-002-ref.html (1525B)
1 <!DOCTYPE html> 2 <style> 3 .block { 4 width: 75px; 5 height: 50px; 6 z-index: -1; 7 border: 5px dotted blue; 8 } 9 10 .container { 11 border: 1px solid; 12 position: relative; 13 width: 100px; 14 height: 100px; 15 display: inline-block; 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 <!-- start aligned --> 28 <div class="container"><div class="block" style="margin-left: 15px;"> 29 <div class="abs" style="left: 45px;"></div> 30 </div></div> 31 <div class="container"><div class="block"> 32 <div class="abs" style="top: 0px;"></div> 33 </div></div> 34 <div class="container"><div class="block" style="margin-left: 15px;"> 35 <div class="abs" style="right: 0px;"></div> 36 </div></div> 37 <br> 38 <!-- end aligned --> 39 <div class="container"><div class="block"> 40 <div class="abs" style="left: -45px;"></div> 41 </div></div> 42 <div class="container"><div class="block" style="margin-left: 15px;"> 43 <div class="abs" style="top: 50px; right: -45px;"></div> 44 </div></div> 45 <div class="container"><div class="block"> 46 <div class="abs" style="left: 50px;"></div> 47 </div></div> 48 <br> 49 <!-- center aligned --> 50 <div class="container"><div class="block" style="margin-left: 15px;"> 51 <div class="abs" style="right: -20px;"></div> 52 </div></div> 53 <div class="container"><div class="block"> 54 <div class="abs" style="top: 25px; left: -20px;"></div> 55 </div></div> 56 <div class="container"><div class="block" style="margin-left: 15px;"> 57 <div class="abs" style="left: 25px;"></div> 58 </div></div> 59 <br>