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: box offsets - relatively positioned boxes</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 <meta content="image" name="flags">
11 <meta content="Box offsets (bottom, left, right, top) expressed in absolute units (not with percentage unit) for relatively positioned boxes are with respect to the edges of the boxes themselves." name="assert">
12
13 <style type="text/css">
14 body {margin: 8px;}
15
16 div#statically-positioned-box
17 {
18 background-color: yellow; /* padding box will be yellow */
19 border: orange solid 50px; /* border box will be orange */
20 height: 100px; /* a bright green square 100px by 100px image will serve as content box */
21 margin-left: 100px;
22 padding: 50px;
23 position: static;
24 width: 100px;
25 }
26
27 div.blue-relatively-positioned
28 {
29 background-color: blue;
30 color: white;
31 height: 25px;
32 position: relative;
33 width: 25px;
34 }
35
36 div#top-left
37 {
38 left: 150px;
39 /*
40 Calculation of left offset:
41
42 100px (div#statically-positioned-box's margin-left)
43 + 50px (div#statically-positioned-box's border-left)
44 ==================
45 150px
46 */
47
48 top: -250px;
49 /*
50 Calculation of top offset:
51 - 50px (div#statically-positioned-box's border-bottom)
52 - 50px (div#statically-positioned-box's padding-bottom)
53 - 100px (div#statically-positioned-box's content height)
54 - 50px (div#statically-positioned-box's padding-top)
55 ==================
56 -250px
57 */
58 }
59
60 div#top-right
61 {
62 right: -325px;
63 /*
64 Calculation of right offset:
65
66 - 100px (div#statically-positioned-box's margin-left)
67 - 50px (div#statically-positioned-box's border-left)
68 - 50px (div#statically-positioned-box's padding-left)
69 - 100px (div#statically-positioned-box's content height)
70 - 50px (div#statically-positioned-box's padding-right)
71 + 25px (div#top-right's content width)
72 ==================
73 -325px
74 */
75
76 top: -275px;
77 /*
78 Calculation of top offset:
79 - 25px (div#top-left's content height)
80 - 50px (div#statically-positioned-box's border-bottom)
81 - 50px (div#statically-positioned-box's padding-bottom)
82 - 100px (div#statically-positioned-box's content height)
83 - 50px (div#statically-positioned-box's padding-top)
84 ==================
85 -275px
86 */
87 }
88
89 div#bottom-left
90 {
91 bottom: 125px;
92 /*
93 Calculation of bottom offset:
94 25px (div#top-left's content height)
95 + 25px (div#top-right's content height)
96 + 50px (div#statically-positioned-box's border-bottom)
97 + 25px (div#bottom-left's content height)
98 ==================
99 125px
100 */
101
102 left: 150px;
103 /*
104 Calculation of left offset:
105
106 100px (div#statically-positioned-box's margin-left)
107 + 50px (div#statically-positioned-box's border-left)
108 ==================
109 150px
110 */
111 }
112
113 div#bottom-right
114 {
115 bottom: 150px;
116 /*
117 Calculation of bottom offset:
118 25px (div#top-left's content height)
119 + 25px (div#top-right's content height)
120 + 25px (div#top-left's content height)
121 + 50px (div#statically-positioned-box's border-bottom)
122 + 25px (div#bottom-left's content height)
123 ==================
124 150px
125 */
126
127 right: -325px;
128 /*
129 Calculation of right offset:
130
131 - 100px (div#statically-positioned-box's margin-left)
132 - 50px (div#statically-positioned-box's border-left)
133 - 50px (div#statically-positioned-box's padding-left)
134 - 100px (div#statically-positioned-box's content height)
135 - 50px (div#statically-positioned-box's padding-right)
136 + 25px (div#bottom-right's content width)
137 ==================
138 -325px
139 */
140 }
141 </style>
142
143 </head>
144
145 <body>
146
147 <p>Test passes if there is a blue square at each corner of the yellow square.</p>
148
149 <div id="statically-positioned-box"><img src="support/lime_color.png" alt="Image download support must be enabled"></div>
150
151 <div class="blue-relatively-positioned" id="top-left">TL</div>
152
153 <div class="blue-relatively-positioned" id="top-right">TR</div>
154
155 <div class="blue-relatively-positioned" id="bottom-left">BL</div>
156
157 <div class="blue-relatively-positioned" id="bottom-right">BR</div>
158
159 </body>
160 </html>