anchor-center-overflow-003-ref.html (4983B)
1 <!DOCTYPE html> 2 <title>anchor-center overflow adjustments (anchored > containing block)</title> 3 4 <style> 5 .container { 6 width: 80px; height: 80px; 7 border: solid gray; 8 margin: 6px; 9 position: relative; 10 float: left; 11 } 12 13 .anchor { 14 border: solid; 15 margin: 16px; 16 position: absolute; 17 } 18 .tl { top: 0; left: 0; } 19 .tr { top: 0; right: 0; } 20 .bl { bottom: 0; left: 0; } 21 .br { bottom: 0; right: 0; } 22 23 .anchored { 24 width: 80px; height: 80px; 25 border: solid; 26 position: absolute; 27 inset: 0; 28 margin: 2px; 29 opacity: 20%; /* the borders will overlap perfectly so this allows checking the whole stack */ 30 } 31 32 .tl { border-color: blue; } 33 .tr { border-color: aqua; } 34 .bl { border-color: fuchsia; } 35 .br { border-color: orange; } 36 37 body > div { clear: both; } 38 </style> 39 40 <div> 41 <div class=container style="writing-mode: horizontal-tb; direction: ltr"> 42 <div class="anchor tl"></div><div class="anchored tl"></div> 43 <div class="anchor tr"></div><div class="anchored tr"></div> 44 <div class="anchor bl"></div><div class="anchored bl"></div> 45 <div class="anchor br"></div><div class="anchored br"></div> 46 </div> 47 48 <div class=container style="writing-mode: horizontal-tb; direction: rtl"> 49 <div class="anchor tl"></div><div class="anchored tl"></div> 50 <div class="anchor tr"></div><div class="anchored tr"></div> 51 <div class="anchor bl"></div><div class="anchored bl"></div> 52 <div class="anchor br"></div><div class="anchored br"></div> 53 </div> 54 55 <div class=container style="writing-mode: vertical-lr; direction: ltr"> 56 <div class="anchor tl"></div><div class="anchored tl"></div> 57 <div class="anchor tr"></div><div class="anchored tr"></div> 58 <div class="anchor bl"></div><div class="anchored bl"></div> 59 <div class="anchor br"></div><div class="anchored br"></div> 60 </div> 61 62 <div class=container style="writing-mode: vertical-lr; direction: rtl"> 63 <div class="anchor tl"></div><div class="anchored tl"></div> 64 <div class="anchor tr"></div><div class="anchored tr"></div> 65 <div class="anchor bl"></div><div class="anchored bl"></div> 66 <div class="anchor br"></div><div class="anchored br"></div> 67 </div> 68 69 <div class=container style="writing-mode: vertical-rl; direction: ltr"> 70 <div class="anchor tl"></div><div class="anchored tl"></div> 71 <div class="anchor tr"></div><div class="anchored tr"></div> 72 <div class="anchor bl"></div><div class="anchored bl"></div> 73 <div class="anchor br"></div><div class="anchored br"></div> 74 </div> 75 76 <div class=container style="writing-mode: vertical-rl; direction: rtl"> 77 <div class="anchor tl"></div><div class="anchored tl"></div> 78 <div class="anchor tr"></div><div class="anchored tr"></div> 79 <div class="anchor bl"></div><div class="anchored bl"></div> 80 <div class="anchor br"></div><div class="anchored br"></div> 81 </div> 82 </div> 83 84 85 <div> 86 <div class=container style="writing-mode: horizontal-tb; direction: ltr"> 87 <div class="anchor tl"></div><div class="anchored tl"></div> 88 <div class="anchor tr"></div><div class="anchored tr"></div> 89 <div class="anchor bl"></div><div class="anchored bl"></div> 90 <div class="anchor br"></div><div class="anchored br"></div> 91 </div> 92 93 <div class=container style="writing-mode: horizontal-tb; direction: rtl"> 94 <div class="anchor tl"></div><div class="anchored tl"></div> 95 <div class="anchor tr"></div><div class="anchored tr"></div> 96 <div class="anchor bl"></div><div class="anchored bl"></div> 97 <div class="anchor br"></div><div class="anchored br"></div> 98 </div> 99 100 <div class=container style="writing-mode: vertical-lr; direction: ltr"> 101 <div class="anchor tl"></div><div class="anchored tl"></div> 102 <div class="anchor tr"></div><div class="anchored tr"></div> 103 <div class="anchor bl"></div><div class="anchored bl"></div> 104 <div class="anchor br"></div><div class="anchored br"></div> 105 </div> 106 107 <div class=container style="writing-mode: vertical-lr; direction: rtl"> 108 <div class="anchor tl"></div><div class="anchored tl"></div> 109 <div class="anchor tr"></div><div class="anchored tr"></div> 110 <div class="anchor bl"></div><div class="anchored bl"></div> 111 <div class="anchor br"></div><div class="anchored br"></div> 112 </div> 113 114 <div class=container style="writing-mode: vertical-rl; direction: ltr"> 115 <div class="anchor tl"></div><div class="anchored tl"></div> 116 <div class="anchor tr"></div><div class="anchored tr"></div> 117 <div class="anchor bl"></div><div class="anchored bl"></div> 118 <div class="anchor br"></div><div class="anchored br"></div> 119 </div> 120 121 <div class=container style="writing-mode: vertical-rl; direction: rtl"> 122 <div class="anchor tl"></div><div class="anchored tl"></div> 123 <div class="anchor tr"></div><div class="anchored tr"></div> 124 <div class="anchor bl"></div><div class="anchored bl"></div> 125 <div class="anchor br"></div><div class="anchored br"></div> 126 </div> 127 </div>