position-absolute-007.xht (1763B)
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 elements child behavior</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-09-20 --> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning" /> 8 <link rel="match" href="position-absolute-007-ref.xht" /> 9 10 <meta name="assert" content="The contents of an absolutely positioned element do not flow around any other boxes and can obscure the contents of another box." /> 11 <style type="text/css"> 12 #div1 13 { 14 position: relative; 15 } 16 #div2 17 { 18 background: orange; 19 position: absolute; 20 height: 1in; 21 top: 0.5in; 22 width: 1in; 23 } 24 #div3 25 { 26 background: blue; 27 float: left; 28 height: 2in; 29 width: 0.5in 30 } 31 </style> 32 </head> 33 <body> 34 <p>Test passes if the "Filler Text" overflow below the orange square and overlaps the bottom blue square.</p> 35 <div id="div1"> 36 <div id="div2"> 37 Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text 38 </div> 39 <div id="div3"></div> 40 </div> 41 </body> 42 </html>