relpos-calcs-002

Relative Positioning - auto bottom = -top

WeasyPrint

This browser

Assertion
For a relatively positioned element, if 'bottom' is 'auto', its used value is minus the value of 'top'.

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: Relative Positioning - auto bottom = -top</title>
 5     <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
 6     <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning">
 7     <meta name="flags" content="">
 8     <meta name="assert" content="For a relatively positioned element, if 'bottom'       is 'auto', its used value is minus the value of 'top'.">
 9     <style type="text/css">
10         div {
11             height: 120px;
12             width: 120px;
13         }
14         .container {
15             margin-top: -60px;
16         }
17         .outer {
18             background: red;
19             position: relative;
20             top: 50%;
21         }
22         .inner {
23             background: green;
24             position: relative;
25             bottom: inherit; /* using inheritance to test computed vs. used */
26         }
27         .control {
28           background: red;
29           margin-top: -60px;
30         }
31     </style>
32   </head>
33   <body>
34     <p>There must be a green box below and no red.</p>
35     <div class="container">
36       <div class="outer">
37         <div class="inner"></div>
38       </div>
39     </div>
40     <div class="control"></div>
41   </body>
42 </html>