align-self-static-position-007-ref.html (1133B)
1 <!DOCTYPE html> 2 <link rel="stylesheet" href="/fonts/ahem.css"> 3 <style> 4 .inline { 5 display: inline; 6 color: transparent; 7 font: 10px Ahem; 8 line-height: 25px; 9 } 10 11 .container { 12 border: 1px solid; 13 position: relative; 14 width: 100px; 15 height: 100px; 16 display: inline-block; 17 margin-left: 50px; 18 margin-bottom: 50px; 19 } 20 21 .abs { 22 width: 50px; 23 height: 50px; 24 position: absolute; 25 background: purple; 26 } 27 </style> 28 <!-- start aligned --> 29 <div class="container"><div class="inline">text 30 <div class="abs" style="top: 25px;"></div> 31 </div></div> 32 <div class="container"><div class="inline">text 33 <div class="abs" style="left: -50px;"></div> 34 </div></div> 35 <div class="container"><div class="inline">text 36 <div class="abs" style="top: 0px;"></div> 37 </div></div> 38 <br> 39 <!-- end aligned --> 40 <div class="container"><div class="inline">text 41 <div class="abs" style="bottom: 50px; left: -50px"></div> 42 </div></div> 43 <div class="container"><div class="inline">text 44 <div class="abs" style="top: 0px;"></div> 45 </div></div> 46 <div class="container"><div class="inline">text 47 <div class="abs" style="top: -25px; left: -50px;"></div> 48 </div></div>