abs-pos-border-offset-001-ref.html (5101B)
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 .htb { 35 writing-mode: horizontal-tb; 36 } 37 38 .ltr { 39 direction: ltr; 40 } 41 .rtl { 42 direction: rtl; 43 } 44 45 .sep { 46 clear: both; 47 display: block; 48 height: 5px; 49 } 50 </style> 51 <body> 52 <div class="cb htb ltr"> 53 <div class="parent htb ltr"> 54 <div class="abspos"></div> 55 </div> 56 </div> 57 <div class="cb htb ltr"> 58 <div class="parent htb rtl"> 59 <div class="abspos"></div> 60 </div> 61 </div> 62 <div class="cb htb ltr"> 63 <div class="parent vlr ltr"> 64 <div class="abspos"></div> 65 </div> 66 </div> 67 <div class="cb htb ltr"> 68 <div class="parent vlr rtl"> 69 <div class="abspos"></div> 70 </div> 71 </div> 72 <div class="cb htb ltr"> 73 <div class="parent vrl ltr"> 74 <div class="abspos"></div> 75 </div> 76 </div> 77 <div class="cb htb ltr"> 78 <div class="parent vrl rtl"> 79 <div class="abspos"></div> 80 </div> 81 </div> 82 <div class="sep"></div> 83 84 <div class="cb htb rtl"> 85 <div class="parent htb ltr"> 86 <div class="abspos"></div> 87 </div> 88 </div> 89 <div class="cb htb rtl"> 90 <div class="parent htb rtl"> 91 <div class="abspos"></div> 92 </div> 93 </div> 94 <div class="cb htb rtl"> 95 <div class="parent vlr ltr"> 96 <div class="abspos"></div> 97 </div> 98 </div> 99 <div class="cb htb rtl"> 100 <div class="parent vlr rtl"> 101 <div class="abspos"></div> 102 </div> 103 </div> 104 <div class="cb htb rtl"> 105 <div class="parent vrl ltr"> 106 <div class="abspos"></div> 107 </div> 108 </div> 109 <div class="cb htb rtl"> 110 <div class="parent vrl rtl"> 111 <div class="abspos"></div> 112 </div> 113 </div> 114 <div class="sep"></div> 115 116 <div class="cb vlr ltr"> 117 <div class="parent htb ltr"> 118 <div class="abspos"></div> 119 </div> 120 </div> 121 <div class="cb vlr ltr"> 122 <div class="parent htb rtl"> 123 <div class="abspos"></div> 124 </div> 125 </div> 126 <div class="cb vlr ltr"> 127 <div class="parent vlr ltr"> 128 <div class="abspos"></div> 129 </div> 130 </div> 131 <div class="cb vlr ltr"> 132 <div class="parent vlr rtl"> 133 <div class="abspos"></div> 134 </div> 135 </div> 136 <div class="cb vlr ltr"> 137 <div class="parent vrl ltr"> 138 <div class="abspos"></div> 139 </div> 140 </div> 141 <div class="cb vlr ltr"> 142 <div class="parent vrl rtl"> 143 <div class="abspos"></div> 144 </div> 145 </div> 146 <div class="sep"></div> 147 148 <div class="cb vlr rtl"> 149 <div class="parent htb ltr"> 150 <div class="abspos"></div> 151 </div> 152 </div> 153 <div class="cb vlr rtl"> 154 <div class="parent htb rtl"> 155 <div class="abspos"></div> 156 </div> 157 </div> 158 <div class="cb vlr rtl"> 159 <div class="parent vlr ltr"> 160 <div class="abspos"></div> 161 </div> 162 </div> 163 <div class="cb vlr rtl"> 164 <div class="parent vlr rtl"> 165 <div class="abspos"></div> 166 </div> 167 </div> 168 <div class="cb vlr rtl"> 169 <div class="parent vrl ltr"> 170 <div class="abspos"></div> 171 </div> 172 </div> 173 <div class="cb vlr rtl"> 174 <div class="parent vrl rtl"> 175 <div class="abspos"></div> 176 </div> 177 </div> 178 <div class="sep"></div> 179 180 <div class="cb vrl ltr"> 181 <div class="parent htb ltr"> 182 <div class="abspos"></div> 183 </div> 184 </div> 185 <div class="cb vrl ltr"> 186 <div class="parent htb rtl"> 187 <div class="abspos"></div> 188 </div> 189 </div> 190 <div class="cb vrl ltr"> 191 <div class="parent vlr ltr"> 192 <div class="abspos"></div> 193 </div> 194 </div> 195 <div class="cb vrl ltr"> 196 <div class="parent vlr rtl"> 197 <div class="abspos"></div> 198 </div> 199 </div> 200 <div class="cb vrl ltr"> 201 <div class="parent vrl ltr"> 202 <div class="abspos"></div> 203 </div> 204 </div> 205 <div class="cb vrl ltr"> 206 <div class="parent vrl rtl"> 207 <div class="abspos"></div> 208 </div> 209 </div> 210 <div class="sep"></div> 211 212 <div class="cb vrl rtl"> 213 <div class="parent htb ltr"> 214 <div class="abspos"></div> 215 </div> 216 </div> 217 <div class="cb vrl rtl"> 218 <div class="parent htb rtl"> 219 <div class="abspos"></div> 220 </div> 221 </div> 222 <div class="cb vrl rtl"> 223 <div class="parent vlr ltr"> 224 <div class="abspos"></div> 225 </div> 226 </div> 227 <div class="cb vrl rtl"> 228 <div class="parent vlr rtl"> 229 <div class="abspos"></div> 230 </div> 231 </div> 232 <div class="cb vrl rtl"> 233 <div class="parent vrl ltr"> 234 <div class="abspos"></div> 235 </div> 236 </div> 237 <div class="cb vrl rtl"> 238 <div class="parent vrl rtl"> 239 <div class="abspos"></div> 240 </div> 241 </div> 242 <div class="sep"></div> 243 </body>