anchor-center-overflow-003.html (5932B)
1 <!DOCTYPE html> 2 <title>anchor-center overflow adjustments (anchored > containing block)</title> 3 <link rel="help" href="https://www.w3.org/TR/css-anchor-position-1/#anchor-center"> 4 <link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety"> 5 <link rel="match" href="anchor-center-overflow-003-ref.html"> 6 <link rel="author" name="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 7 8 <style> 9 .container { 10 width: 80px; height: 80px; 11 border: solid gray; 12 margin: 6px; 13 position: relative; 14 anchor-scope: --tl, --tr, --br, --bt; 15 float: left; 16 } 17 18 .anchor { 19 border: solid; 20 margin: 16px; 21 position: absolute; 22 } 23 .anchor.tl { anchor-name: --tl; top: 0; left: 0; } 24 .anchor.tr { anchor-name: --tr; top: 0; right: 0; } 25 .anchor.bl { anchor-name: --bl; bottom: 0; left: 0; } 26 .anchor.br { anchor-name: --br; bottom: 0; right: 0; } 27 28 .anchored { 29 width: 80px; height: 80px; 30 border: solid; 31 position: absolute; 32 place-self: anchor-center; 33 margin: 2px; 34 inset: 6px; 35 opacity: 20%; /* the borders will overlap perfectly so this allows checking the whole stack */ 36 } 37 .anchored.tl { position-anchor: --tl; } 38 .anchored.tr { position-anchor: --tr; } 39 .anchored.bl { position-anchor: --bl; } 40 .anchored.br { position-anchor: --br; } 41 42 .tl { border-color: blue; } 43 .tr { border-color: aqua; } 44 .bl { border-color: fuchsia; } 45 .br { border-color: orange; } 46 47 body > div { clear: both; } 48 .mix .anchored.tl { writing-mode: horizontal-tb; direction: rtl; } 49 .mix .anchored.tr { writing-mode: vertical-rl; direction: ltr; } 50 .mix .anchored.bl { writing-mode: vertical-lr; direciton: rtl; } 51 .mix .anchored.br { writing-mode: sideways-lr; direction: ltr; } 52 </style> 53 54 <div class=straight> 55 <div class=container style="writing-mode: horizontal-tb; 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: horizontal-tb; 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-lr; 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-lr; 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 83 <div class=container style="writing-mode: vertical-rl; direction: ltr"> 84 <div class="anchor tl"></div><div class="anchored tl"></div> 85 <div class="anchor tr"></div><div class="anchored tr"></div> 86 <div class="anchor bl"></div><div class="anchored bl"></div> 87 <div class="anchor br"></div><div class="anchored br"></div> 88 </div> 89 90 <div class=container style="writing-mode: vertical-rl; direction: rtl"> 91 <div class="anchor tl"></div><div class="anchored tl"></div> 92 <div class="anchor tr"></div><div class="anchored tr"></div> 93 <div class="anchor bl"></div><div class="anchored bl"></div> 94 <div class="anchor br"></div><div class="anchored br"></div> 95 </div> 96 </div> 97 98 <div class=mix> 99 <div class=container style="writing-mode: horizontal-tb; direction: ltr"> 100 <div class="anchor tl"></div><div class="anchored tl"></div> 101 <div class="anchor tr"></div><div class="anchored tr"></div> 102 <div class="anchor bl"></div><div class="anchored bl"></div> 103 <div class="anchor br"></div><div class="anchored br"></div> 104 </div> 105 106 <div class=container style="writing-mode: horizontal-tb; direction: rtl"> 107 <div class="anchor tl"></div><div class="anchored tl"></div> 108 <div class="anchor tr"></div><div class="anchored tr"></div> 109 <div class="anchor bl"></div><div class="anchored bl"></div> 110 <div class="anchor br"></div><div class="anchored br"></div> 111 </div> 112 113 <div class=container style="writing-mode: vertical-lr; direction: ltr"> 114 <div class="anchor tl"></div><div class="anchored tl"></div> 115 <div class="anchor tr"></div><div class="anchored tr"></div> 116 <div class="anchor bl"></div><div class="anchored bl"></div> 117 <div class="anchor br"></div><div class="anchored br"></div> 118 </div> 119 120 <div class=container style="writing-mode: vertical-lr; direction: rtl"> 121 <div class="anchor tl"></div><div class="anchored tl"></div> 122 <div class="anchor tr"></div><div class="anchored tr"></div> 123 <div class="anchor bl"></div><div class="anchored bl"></div> 124 <div class="anchor br"></div><div class="anchored br"></div> 125 </div> 126 127 <div class=container style="writing-mode: vertical-rl; direction: ltr"> 128 <div class="anchor tl"></div><div class="anchored tl"></div> 129 <div class="anchor tr"></div><div class="anchored tr"></div> 130 <div class="anchor bl"></div><div class="anchored bl"></div> 131 <div class="anchor br"></div><div class="anchored br"></div> 132 </div> 133 134 <div class=container style="writing-mode: vertical-rl; direction: rtl"> 135 <div class="anchor tl"></div><div class="anchored tl"></div> 136 <div class="anchor tr"></div><div class="anchored tr"></div> 137 <div class="anchor bl"></div><div class="anchored bl"></div> 138 <div class="anchor br"></div><div class="anchored br"></div> 139 </div> 140 </div>