absolute-non-replaced-height-008.xht (2490B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Absolutely positioned, non-replaced elements, 'top' set to static position</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-27 --> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" /> 8 <link rel="match" href="absolute-non-replaced-height-008-ref.xht" /> 9 10 <meta name="assert" content="When 'top' is set to the static position and any 'auto' values for top and bottom margin are set to '0', when 'top' and 'bottom' are 'auto' and 'height' is not 'auto'." /> 11 <style type="text/css"> 12 #div1 13 { 14 background: blue; 15 height: 3in; 16 position: relative; 17 width: 1in; 18 } 19 div div 20 { 21 background: orange; 22 bottom: auto; 23 height: 1in; 24 margin-bottom: auto; 25 margin-top: auto; 26 position: absolute; 27 top: auto; 28 width: 100%; 29 } 30 31 32 /* 33 34 auto (to solve) : top 35 + 36 auto (to solve): margin-top 37 + 38 0 : border-top-width 39 + 40 0 : padding-top 41 + 42 1in : height 43 + 44 0 : padding-bottom 45 + 46 0 : border-bottom-width 47 + 48 auto (to solve): margin-bottom 49 + 50 auto (to solve) : bottom 51 ============= 52 3in : height of containing block 53 54 55 " 56 'top' and 'bottom' are 'auto' and 'height' is not 'auto', 57 then set 'top' to the static position, 58 set 'auto' values for 'margin-top' and 'margin-bottom' to 0, 59 and solve for 'bottom' 60 " 61 62 so this brings: 63 64 0 (solved static position) : top 65 + 66 0 (solved): margin-top 67 + 68 0 : border-top-width 69 + 70 0 : padding-top 71 + 72 1in : height 73 + 74 0 : padding-bottom 75 + 76 0 : border-bottom-width 77 + 78 0 (solved): margin-bottom 79 + 80 auto (to solve) : bottom 81 ============= 82 3in : height of containing block 83 84 So, bottom must use 2in in order to balance the equation 85 86 87 */ 88 </style> 89 </head> 90 <body> 91 <p>Test passes if a blue rectangle is below an orange square.</p> 92 <div id="div1"> 93 <div></div> 94 </div> 95 </body> 96 </html>