position-relative-035

Relatively positioned boxes preserve the space created for it in flow

WeasyPrint

This browser

Assertion
Relative positioned content keeps its normal flow size including line breaks and the space originally reserved for it.

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: Relatively positioned boxes preserve the space created for it in flow</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#comp-relpos">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="Relative positioned content keeps its normal flow size including line breaks and the space originally reserved for it.">
 9         <style type="text/css">
10             #div1
11             {
12                 height: 3em;
13                 width: 5em;
14             }
15             #div2
16             {
17                 position: relative;
18                 top: 16px;
19                 background: black;
20             }
21             #div3
22             {
23                 background: orange;
24             }
25         </style>
26     </head>
27     <body>
28         <p>Test passes if the black box below has an orange line below it.</p>
29         <div id="div1">
30             <div id="div2">Filler Text Filler Text Filler Text</div>
31             <div id="div3">Flller Text</div>
32         </div>
33     </body>
34 </html>