1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: position absolute - dimensions and position given by offset percentages and inherit</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">
10 <link rel="help" title="6.2.1 The 'inherit' value" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">
11 <link rel="help" title="4.3.2 Length" href="http://www.w3.org/TR/CSS21/syndata.html#length-units">
12 <meta content="" name="flags">
13 <meta content="Absolutely positioned boxes can be dimensioned and positioned solely by setting offset 'top', 'right', 'bottom' and 'left' property values with percentage unit and then with inherit keyword. 'inherit' on a offset property makes such offset property take the same computed value as the offset property of the nearest positioned ancestor; in the case of a percentage value, the computed value is the specified percentage value of such nearest positioned ancestor." name="assert">
14
15 <style type="text/css">
16 body {margin: 8px;}
17
18 p
19 {
20 font: 16px/20px serif;
21 margin: 1em 0em;
22 }
23
24 div#rel-pos-grand-parent
25 {
26 background-color: lime;
27 height: 300px;
28 position: relative;
29 width: 400px;
30 }
31
32 div#abs-pos-parent
33 {
34 background-color: lime;
35 bottom: 10%; /* 10% of 300px == 30px */
36 left: 15%; /* 15% of 400px == 60px */
37 position: absolute;
38 right: 20%; /* 20% of 400px == 80px */
39 top: 30%; /* 30% of 300px == 90px */
40 /*
41 height will be 300px minus 90px minus 30px == 180px
42 width will be 400px minus 60px minus 80px == 260px
43 */
44 }
45
46 div#abs-pos-child-red
47 {
48 background-color: red;
49 bottom: inherit; /* 10% of div#abs-pos-parent's height == 18px */
50 left: inherit; /* 15% of div#abs-pos-parent's width == 39px */
51 position: inherit;
52 right: inherit; /* 20% of div#abs-pos-parent's width == 52px */
53 top: inherit; /* 30% of div#abs-pos-parent's height == 54px */
54 /*
55 height will be 180px minus 54px minus 18px == 108px
56 width will be 260px minus 39px minus 52px == 169px
57 */
58 }
59
60 div#abs-pos-overlapping-lime
61 {
62 background-color: lime;
63 height: 108px;
64 left: 107px;
65 position: absolute;
66 width: 169px;
67 top: 216px;
68 }
69
70 /*
71 8px (body's margin-left)
72 + 60px (div#abs-pos-parent's left offset)
73 + 39px (div#abs-pos-child-red's left offset)
74 ==================
75 107px
76 */
77
78 /*
79 16px (max(8px, 16px): margin collapsing between body's margin-top and p's margin-top)
80 + 20px (first line)
81 + 20px (second line)
82 + 16px (p's margin-bottom)
83 + 90px (div#abs-pos-parent's top offset)
84 + 54px (div#abs-pos-child-red's top offset)
85 ==================
86 216px
87 */
88 </style>
89
90 </head>
91
92 <body>
93
94 <p>Test passes if there is a filled <br>
95 bright green rectangle and no red.</p>
96
97 <div id="rel-pos-grand-parent">
98 <div id="abs-pos-parent">
99 <div id="abs-pos-child-red"></div>
100 </div>
101 </div>
102
103 <div id="abs-pos-overlapping-lime"></div>
104
105 </body>
106 </html>