anchor-center-overflow-001.html (5827B)
1 <!DOCTYPE html> 2 <title>anchor-center overflow adjustments (anchored < inset area)</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-001-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: 40px; height: 40px; 30 border: solid; 31 position: absolute; 32 place-self: anchor-center; 33 margin: 2px; 34 inset: 6px; 35 } 36 .anchored.tl { position-anchor: --tl; } 37 .anchored.tr { position-anchor: --tr; } 38 .anchored.bl { position-anchor: --bl; } 39 .anchored.br { position-anchor: --br; } 40 41 .tl { border-color: blue; } 42 .tr { border-color: aqua; } 43 .bl { border-color: fuchsia; } 44 .br { border-color: orange; } 45 46 body > div { clear: both; } 47 .mix .anchored.tl { writing-mode: horizontal-tb; direction: rtl; } 48 .mix .anchored.tr { writing-mode: vertical-rl; direction: ltr; } 49 .mix .anchored.bl { writing-mode: vertical-lr; direciton: rtl; } 50 .mix .anchored.br { writing-mode: sideways-lr; direction: ltr; } 51 </style> 52 53 <div class=straight> 54 <div class=container style="writing-mode: horizontal-tb; direction: ltr"> 55 <div class="anchor tl"></div><div class="anchored tl"></div> 56 <div class="anchor tr"></div><div class="anchored tr"></div> 57 <div class="anchor bl"></div><div class="anchored bl"></div> 58 <div class="anchor br"></div><div class="anchored br"></div> 59 </div> 60 61 <div class=container style="writing-mode: horizontal-tb; direction: rtl"> 62 <div class="anchor tl"></div><div class="anchored tl"></div> 63 <div class="anchor tr"></div><div class="anchored tr"></div> 64 <div class="anchor bl"></div><div class="anchored bl"></div> 65 <div class="anchor br"></div><div class="anchored br"></div> 66 </div> 67 68 <div class=container style="writing-mode: vertical-lr; direction: ltr"> 69 <div class="anchor tl"></div><div class="anchored tl"></div> 70 <div class="anchor tr"></div><div class="anchored tr"></div> 71 <div class="anchor bl"></div><div class="anchored bl"></div> 72 <div class="anchor br"></div><div class="anchored br"></div> 73 </div> 74 75 <div class=container style="writing-mode: vertical-lr; direction: rtl"> 76 <div class="anchor tl"></div><div class="anchored tl"></div> 77 <div class="anchor tr"></div><div class="anchored tr"></div> 78 <div class="anchor bl"></div><div class="anchored bl"></div> 79 <div class="anchor br"></div><div class="anchored br"></div> 80 </div> 81 82 <div class=container style="writing-mode: vertical-rl; direction: ltr"> 83 <div class="anchor tl"></div><div class="anchored tl"></div> 84 <div class="anchor tr"></div><div class="anchored tr"></div> 85 <div class="anchor bl"></div><div class="anchored bl"></div> 86 <div class="anchor br"></div><div class="anchored br"></div> 87 </div> 88 89 <div class=container style="writing-mode: vertical-rl; direction: rtl"> 90 <div class="anchor tl"></div><div class="anchored tl"></div> 91 <div class="anchor tr"></div><div class="anchored tr"></div> 92 <div class="anchor bl"></div><div class="anchored bl"></div> 93 <div class="anchor br"></div><div class="anchored br"></div> 94 </div> 95 </div> 96 97 <div class=mix> 98 <div class=container style="writing-mode: horizontal-tb; direction: ltr"> 99 <div class="anchor tl"></div><div class="anchored tl"></div> 100 <div class="anchor tr"></div><div class="anchored tr"></div> 101 <div class="anchor bl"></div><div class="anchored bl"></div> 102 <div class="anchor br"></div><div class="anchored br"></div> 103 </div> 104 105 <div class=container style="writing-mode: horizontal-tb; direction: rtl"> 106 <div class="anchor tl"></div><div class="anchored tl"></div> 107 <div class="anchor tr"></div><div class="anchored tr"></div> 108 <div class="anchor bl"></div><div class="anchored bl"></div> 109 <div class="anchor br"></div><div class="anchored br"></div> 110 </div> 111 112 <div class=container style="writing-mode: vertical-lr; direction: ltr"> 113 <div class="anchor tl"></div><div class="anchored tl"></div> 114 <div class="anchor tr"></div><div class="anchored tr"></div> 115 <div class="anchor bl"></div><div class="anchored bl"></div> 116 <div class="anchor br"></div><div class="anchored br"></div> 117 </div> 118 119 <div class=container style="writing-mode: vertical-lr; direction: rtl"> 120 <div class="anchor tl"></div><div class="anchored tl"></div> 121 <div class="anchor tr"></div><div class="anchored tr"></div> 122 <div class="anchor bl"></div><div class="anchored bl"></div> 123 <div class="anchor br"></div><div class="anchored br"></div> 124 </div> 125 126 <div class=container style="writing-mode: vertical-rl; direction: ltr"> 127 <div class="anchor tl"></div><div class="anchored tl"></div> 128 <div class="anchor tr"></div><div class="anchored tr"></div> 129 <div class="anchor bl"></div><div class="anchored bl"></div> 130 <div class="anchor br"></div><div class="anchored br"></div> 131 </div> 132 133 <div class=container style="writing-mode: vertical-rl; direction: rtl"> 134 <div class="anchor tl"></div><div class="anchored tl"></div> 135 <div class="anchor tr"></div><div class="anchored tr"></div> 136 <div class="anchor bl"></div><div class="anchored bl"></div> 137 <div class="anchor br"></div><div class="anchored br"></div> 138 </div> 139 </div>