abs-pos-border-offset-002-ref.html (8461B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <style> 6 body { margin: 0; } 7 .cb { 8 position: relative; 9 inline-size: 45px; 10 block-size: 40px; 11 background: lightblue; 12 border: solid gray; 13 border-width: 1px 2px 3px 4px; 14 float: left; 15 margin-right: 5px; 16 } 17 .parent { 18 inline-size: 35px; 19 block-size: 30px; 20 background: orange; 21 } 22 .abspos { 23 inline-size: 20px; 24 block-size: 15px; 25 background: pink; 26 } 27 28 .vrl { 29 writing-mode: vertical-rl; 30 } 31 .vlr { 32 writing-mode: vertical-lr; 33 } 34 .srl { 35 writing-mode: sideways-rl; 36 } 37 .slr { 38 writing-mode: sideways-lr; 39 } 40 .htb { 41 writing-mode: horizontal-tb; 42 } 43 44 .ltr { 45 direction: ltr; 46 } 47 .rtl { 48 direction: rtl; 49 } 50 51 .sep { 52 clear: both; 53 display: block; 54 height: 5px; 55 } 56 </style> 57 <body> 58 <div class="cb htb ltr"> 59 <div class="parent slr ltr"> 60 <div class="abspos"></div> 61 </div> 62 </div> 63 <div class="cb htb ltr"> 64 <div class="parent slr rtl"> 65 <div class="abspos"></div> 66 </div> 67 </div> 68 <div class="cb htb ltr"> 69 <div class="parent srl ltr"> 70 <div class="abspos"></div> 71 </div> 72 </div> 73 <div class="cb htb ltr"> 74 <div class="parent srl rtl"> 75 <div class="abspos"></div> 76 </div> 77 </div> 78 <div class="sep"></div> 79 80 <div class="cb htb rtl"> 81 <div class="parent slr ltr"> 82 <div class="abspos"></div> 83 </div> 84 </div> 85 <div class="cb htb rtl"> 86 <div class="parent slr rtl"> 87 <div class="abspos"></div> 88 </div> 89 </div> 90 <div class="cb htb rtl"> 91 <div class="parent srl ltr"> 92 <div class="abspos"></div> 93 </div> 94 </div> 95 <div class="cb htb rtl"> 96 <div class="parent srl rtl"> 97 <div class="abspos"></div> 98 </div> 99 </div> 100 <div class="sep"></div> 101 102 <div class="cb vlr ltr"> 103 <div class="parent slr ltr"> 104 <div class="abspos"></div> 105 </div> 106 </div> 107 <div class="cb vlr ltr"> 108 <div class="parent slr rtl"> 109 <div class="abspos"></div> 110 </div> 111 </div> 112 <div class="cb vlr ltr"> 113 <div class="parent srl ltr"> 114 <div class="abspos"></div> 115 </div> 116 </div> 117 <div class="cb vlr ltr"> 118 <div class="parent srl rtl"> 119 <div class="abspos"></div> 120 </div> 121 </div> 122 <div class="sep"></div> 123 124 <div class="cb vlr rtl"> 125 <div class="parent slr ltr"> 126 <div class="abspos"></div> 127 </div> 128 </div> 129 <div class="cb vlr rtl"> 130 <div class="parent slr rtl"> 131 <div class="abspos"></div> 132 </div> 133 </div> 134 <div class="cb vlr rtl"> 135 <div class="parent srl ltr"> 136 <div class="abspos"></div> 137 </div> 138 </div> 139 <div class="cb vlr rtl"> 140 <div class="parent srl rtl"> 141 <div class="abspos"></div> 142 </div> 143 </div> 144 <div class="sep"></div> 145 146 <div class="cb vrl ltr"> 147 <div class="parent slr ltr"> 148 <div class="abspos"></div> 149 </div> 150 </div> 151 <div class="cb vrl ltr"> 152 <div class="parent slr rtl"> 153 <div class="abspos"></div> 154 </div> 155 </div> 156 <div class="cb vrl ltr"> 157 <div class="parent srl ltr"> 158 <div class="abspos"></div> 159 </div> 160 </div> 161 <div class="cb vrl ltr"> 162 <div class="parent srl rtl"> 163 <div class="abspos"></div> 164 </div> 165 </div> 166 <div class="sep"></div> 167 168 <div class="cb vrl rtl"> 169 <div class="parent slr ltr"> 170 <div class="abspos"></div> 171 </div> 172 </div> 173 <div class="cb vrl rtl"> 174 <div class="parent slr rtl"> 175 <div class="abspos"></div> 176 </div> 177 </div> 178 <div class="cb vrl rtl"> 179 <div class="parent srl ltr"> 180 <div class="abspos"></div> 181 </div> 182 </div> 183 <div class="cb vrl rtl"> 184 <div class="parent srl rtl"> 185 <div class="abspos"></div> 186 </div> 187 </div> 188 <div class="sep"></div> 189 190 <div class="cb slr ltr"> 191 <div class="parent htb ltr"> 192 <div class="abspos"></div> 193 </div> 194 </div> 195 <div class="cb slr ltr"> 196 <div class="parent htb rtl"> 197 <div class="abspos"></div> 198 </div> 199 </div> 200 <div class="cb slr ltr"> 201 <div class="parent vlr ltr"> 202 <div class="abspos"></div> 203 </div> 204 </div> 205 <div class="cb slr ltr"> 206 <div class="parent vlr rtl"> 207 <div class="abspos"></div> 208 </div> 209 </div> 210 <div class="cb slr ltr"> 211 <div class="parent vrl ltr"> 212 <div class="abspos"></div> 213 </div> 214 </div> 215 <div class="cb slr ltr"> 216 <div class="parent vrl rtl"> 217 <div class="abspos"></div> 218 </div> 219 </div> 220 <div class="cb slr ltr"> 221 <div class="parent slr ltr"> 222 <div class="abspos"></div> 223 </div> 224 </div> 225 <div class="cb slr ltr"> 226 <div class="parent slr rtl"> 227 <div class="abspos"></div> 228 </div> 229 </div> 230 <div class="cb slr ltr"> 231 <div class="parent srl ltr"> 232 <div class="abspos"></div> 233 </div> 234 </div> 235 <div class="cb slr ltr"> 236 <div class="parent srl rtl"> 237 <div class="abspos"></div> 238 </div> 239 </div> 240 <div class="sep"></div> 241 242 <div class="cb slr rtl"> 243 <div class="parent htb ltr"> 244 <div class="abspos"></div> 245 </div> 246 </div> 247 <div class="cb slr rtl"> 248 <div class="parent htb rtl"> 249 <div class="abspos"></div> 250 </div> 251 </div> 252 <div class="cb slr rtl"> 253 <div class="parent vlr ltr"> 254 <div class="abspos"></div> 255 </div> 256 </div> 257 <div class="cb slr rtl"> 258 <div class="parent vlr rtl"> 259 <div class="abspos"></div> 260 </div> 261 </div> 262 <div class="cb slr rtl"> 263 <div class="parent vrl ltr"> 264 <div class="abspos"></div> 265 </div> 266 </div> 267 <div class="cb slr rtl"> 268 <div class="parent vrl rtl"> 269 <div class="abspos"></div> 270 </div> 271 </div> 272 <div class="cb slr rtl"> 273 <div class="parent slr ltr"> 274 <div class="abspos"></div> 275 </div> 276 </div> 277 <div class="cb slr rtl"> 278 <div class="parent slr rtl"> 279 <div class="abspos"></div> 280 </div> 281 </div> 282 <div class="cb slr rtl"> 283 <div class="parent srl ltr"> 284 <div class="abspos"></div> 285 </div> 286 </div> 287 <div class="cb slr rtl"> 288 <div class="parent srl rtl"> 289 <div class="abspos"></div> 290 </div> 291 </div> 292 <div class="sep"></div> 293 294 <div class="cb srl ltr"> 295 <div class="parent htb ltr"> 296 <div class="abspos"></div> 297 </div> 298 </div> 299 <div class="cb srl ltr"> 300 <div class="parent htb rtl"> 301 <div class="abspos"></div> 302 </div> 303 </div> 304 <div class="cb srl ltr"> 305 <div class="parent vlr ltr"> 306 <div class="abspos"></div> 307 </div> 308 </div> 309 <div class="cb srl ltr"> 310 <div class="parent vlr rtl"> 311 <div class="abspos"></div> 312 </div> 313 </div> 314 <div class="cb srl ltr"> 315 <div class="parent vrl ltr"> 316 <div class="abspos"></div> 317 </div> 318 </div> 319 <div class="cb srl ltr"> 320 <div class="parent vrl rtl"> 321 <div class="abspos"></div> 322 </div> 323 </div> 324 <div class="cb srl ltr"> 325 <div class="parent slr ltr"> 326 <div class="abspos"></div> 327 </div> 328 </div> 329 <div class="cb srl ltr"> 330 <div class="parent slr rtl"> 331 <div class="abspos"></div> 332 </div> 333 </div> 334 <div class="cb srl ltr"> 335 <div class="parent srl ltr"> 336 <div class="abspos"></div> 337 </div> 338 </div> 339 <div class="cb srl ltr"> 340 <div class="parent srl rtl"> 341 <div class="abspos"></div> 342 </div> 343 </div> 344 <div class="sep"></div> 345 346 <div class="cb srl rtl"> 347 <div class="parent htb ltr"> 348 <div class="abspos"></div> 349 </div> 350 </div> 351 <div class="cb srl rtl"> 352 <div class="parent htb rtl"> 353 <div class="abspos"></div> 354 </div> 355 </div> 356 <div class="cb srl rtl"> 357 <div class="parent vlr ltr"> 358 <div class="abspos"></div> 359 </div> 360 </div> 361 <div class="cb srl rtl"> 362 <div class="parent vlr rtl"> 363 <div class="abspos"></div> 364 </div> 365 </div> 366 <div class="cb srl rtl"> 367 <div class="parent vrl ltr"> 368 <div class="abspos"></div> 369 </div> 370 </div> 371 <div class="cb srl rtl"> 372 <div class="parent vrl rtl"> 373 <div class="abspos"></div> 374 </div> 375 </div> 376 <div class="cb srl rtl"> 377 <div class="parent slr ltr"> 378 <div class="abspos"></div> 379 </div> 380 </div> 381 <div class="cb srl rtl"> 382 <div class="parent slr rtl"> 383 <div class="abspos"></div> 384 </div> 385 </div> 386 <div class="cb srl rtl"> 387 <div class="parent srl ltr"> 388 <div class="abspos"></div> 389 </div> 390 </div> 391 <div class="cb srl rtl"> 392 <div class="parent srl rtl"> 393 <div class="abspos"></div> 394 </div> 395 </div> 396 <div class="sep"></div> 397 </body>