top-offset-002

Position 'top' offset property - absolute length value and relative positioning

WeasyPrint

This browser

Assertion
The 'top' property, when using an absolute length value (not percentage) for relative positioning, specifies the offset of the box itself.

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: Position 'top' offset property - absolute length value and relative positioning</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#propdef-top">
 7         <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">
 8         <meta name="flags" content="">
 9         <meta name="assert" content="The 'top' property, when using an absolute length value (not percentage) for relative positioning, specifies the offset of the box itself.">
10         <style type="text/css">
11             #div1
12             {
13                 background: blue;
14                 height: 1in;
15                 width: 1in;
16             }
17             div div
18             {
19                 background: white;
20                 height: 0.5in;
21                 position: relative;
22                 top: 0.5in;
23                 width: 0.5in;
24             }
25         </style>
26     </head>
27     <body>
28         <p>Test passes if there is a box below with its bottom-left corner missing.</p>
29         <div id="div1">
30             <div></div>
31         </div>
32     </body>
33 </html>