position-area-alignment-overflow-001-ref.html (2880B)
1 <!DOCTYPE html> 2 <title>Reference: position-area normal alignment overflow in a scrollable container</title> 3 <style> 4 .container { 5 position: relative; 6 overflow: scroll; 7 scrollbar-width: none; 8 width: 100px; 9 height: 120px; 10 border: solid; 11 margin: 1em; 12 float: left; 13 } 14 .anchor { 15 border: solid blue 10px; 16 inset: 0; 17 place-self: center; 18 position: absolute; 19 } 20 .test { 21 border: solid 5px #0084; 22 box-sizing: border-box; 23 position: absolute; 24 } 25 .start-inline { 26 margin-inline: 0 -10px; 27 } 28 .start-block { 29 margin-block: 0 -10px; 30 } 31 .end-inline { 32 margin-inline: -10px 0; 33 } 34 .end-block { 35 margin-block: -10px 0; 36 } 37 .center-inline { 38 margin-inline: -5px; 39 } 40 .center-block { 41 margin-block: -5px; 42 } 43 </style> 44 45 <div class="container" title="TB LTR"> 46 <div> 47 <div class="anchor"></div> 48 <div class="test start-inline start-block" style="inset: 0 60px 70px 0"></div> 49 <div class="test start-inline start-block" style="inset: 70px 0 0 60px"></div> 50 <div class="test center-inline center-block" style="inset: 50px 40px 50px 40px"></div> 51 </div> 52 </div> 53 54 <div class="container" title="TB LTR"> 55 <div class="anchor"></div> 56 <div class="test start-inline start-block" style="inset: 0 0 70px"></div> 57 <div class="test start-inline start-block" style="inset: 70px 0 0"></div> 58 <div class="test center-inline start-block" style="inset: 0 40px"></div> 59 </div> 60 61 <div class="container" style="writing-mode: vertical-rl" title="RL TTB"> 62 <div class="anchor"></div> 63 <div class="test start-inline start-block" style="inset: 0 60px 70px 0"></div> 64 <div class="test start-inline start-block" style="inset: 70px 0 0 60px"></div> 65 <div class="test center-inline center-block" style="inset: 50px 40px 50px 40px"></div> 66 </div> 67 68 <div class="container" style="writing-mode: vertical-rl" title="RL TTB"> 69 <div class="anchor"></div> 70 <div class="test start-inline start-block" style="inset: 0 0 70px"></div> 71 <div class="test start-inline start-block" style="inset: 70px 0 0"></div> 72 <div class="test center-block start-inline" style="inset: 0 40px"></div> 73 </div> 74 75 <div class="container" style="writing-mode: vertical-lr; direction: rtl;" title="LR BTT"> 76 <div class="anchor"></div> 77 <div class="test start-inline start-block" style="inset: 0 60px 70px 0"></div> 78 <div class="test start-inline start-block" style="inset: 70px 0 0 60px"></div> 79 <div class="test center-inline center-block" style="inset: 50px 40px 50px 40px"></div> 80 </div> 81 82 <div class="container" style="writing-mode: vertical-lr; direction: rtl;" title="LR BTT"> 83 <div class="anchor"></div> 84 <div class="test start-inline start-block" style="inset: 0 0 70px"></div> 85 <div class="test start-inline start-block" style="inset: 70px 0 0"></div> 86 <div class="test center-block start-inline" style="inset: 0 40px"></div> 87 </div>