position-absolute-007

Absolutely positioned elements child behavior

WeasyPrint

This browser

Assertion
The contents of an absolutely positioned element do not flow around any other boxes and can obscure the contents of another box.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 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="help" href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning">
 7         <meta name="flags" content="">
 8         <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.">
 9         <style type="text/css">
10             #div1
11             {
12                 position: relative;
13             }
14             #div2
15             {
16                 background: orange;
17                 position: absolute;
18                 height: 1in;
19                 top: 0.5in;
20                 width: 1in;
21             }
22             #div3
23             {
24                 background: blue;
25                 float: left;
26                 height: 2in;
27                 width: 0.5in
28             }
29             span
30             {
31                 white-space: nowrap;
32             }
33         </style>
34     </head>
35     <body>
36         <p>Test passes if the "Filler Text" overflows below the orange box and overlaps the bottom blue box.</p>
37         <div id="div1">
38             <div id="div2">
39                 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
40             </div>
41             <div id="div3"></div>
42         </div>
43     </body>
44 </html>