align-self-static-position-004-ref.html (1715B)
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 28 .vertRL { 29 writing-mode: vertical-rl; 30 } 31 32 .vertLR { 33 writing-mode: vertical-lr; 34 } 35 </style> 36 <!-- start aligned --> 37 <div class="container vertRL"><div class="inline">text 38 <div class="abs" style="top: 0px; right: 25px;"></div> 39 </div></div> 40 <div class="container vertLR"><div class="inline">text 41 <div class="abs" style="top: 0px; left: 25px;"></div> 42 </div></div> 43 <div class="container vertRL"><div class="inline">text 44 <div class="abs" style="top: 0px; right: 0px;"></div> 45 </div></div> 46 <br> 47 <!-- end aligned --> 48 <div class="container vertLR"><div class="inline">text 49 <div class="abs" style="top: -50px; right: 50px"></div> 50 </div></div> 51 <div class="container vertRL"><div class="inline">text 52 <div class="abs" style="bottom: 0px; left: 50px;"></div> 53 </div></div> 54 <div class="container vertLR"><div class="inline">text 55 <div class="abs" style="top: -50px; right: 0px;"></div> 56 </div></div> 57 <br> 58 <!-- center aligned --> 59 <div class="container vertLR"><div class="inline">text 60 <div class="abs" style="right: 12.5px; top: -25px;"></div> 61 </div></div> 62 <div class="container vertRL"><div class="inline">text 63 <div class="abs" style="top: 25px; left: 12.5px;"></div> 64 </div></div> 65 <div class="container vertLR"><div class="inline">text 66 <div class="abs" style="top: -25px; left: 25px;"></div> 67 </div></div>