embedded-doc-abs-pos-non-replaced-icb-vrl-032.html (2246B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 3 <html> 4 5 <head> 6 7 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 8 9 <title>Embedded HTML document for abs-pos-non-replaced-icb-vrl-032 in 'writing-mode: vertical-rl'</title> 10 11 <!-- 12 position absolute and 'vertical-rl' - overconstrained values with 'direction: rtl' in initial containing block 13 --> 14 15 <style type="text/css"> 16 html 17 { 18 direction: rtl; 19 } 20 21 div 22 { 23 background-color: green; 24 border-left: green none 0px; 25 border-right: green none 0px; 26 height: 100px; 27 left: 20%; 28 margin-left: 0px; 29 margin-right: 0px; 30 position: absolute; 31 right: 20%; 32 top: 0px; 33 width: 20%; 34 writing-mode: vertical-rl; 35 } 36 37 /* 38 " 39 If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value. 40 " 41 10.3.7 Absolutely positioned, non-replaced elements 42 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width 43 44 So: 45 46 20% : left 47 + 48 0px : margin-left 49 + 50 0px : border-left-width 51 + 52 0px : padding-left 53 + 54 20% : width 55 + 56 0px : padding-right 57 + 58 0px : border-right-width 59 + 60 0px : margin-right 61 + 62 20% : right 63 ==================== 64 500px : width of containing block (width of Initial Containing Block) 65 66 becomes 67 68 ignore and solve : left 69 + 70 0px : margin-left 71 + 72 0px : border-left-width 73 + 74 0px : padding-left 75 + 76 100px : width (20% of 500px == 100px) 77 + 78 0px : padding-right 79 + 80 0px : border-right-width 81 + 82 0px : margin-right 83 + 84 100px : right 85 ==================== 86 500px : width of containing block (width of Initial Containing Block) 87 88 so used left offset value must be 300px . 89 90 */ 91 </style> 92 </head> 93 94 <body> 95 96 <div></div> 97 98 </body> 99 </html>