Only when you set
an element to one of the other three positioning options??”relative,
absolute, or ?¬? xed??”do the top, left, right, and bottom properties
actually do anything. Let??™s see this in action by setting the inner div??™s
position property to absolute.
div#outer_div {width:250px; margin:50px 40px; border-top:3px
solid red;}
div#inner_div {position:absolute; top:10px; left:20px;
background:#AAA;}
But absolutely positioned with respect to what? Because there is no
other relatively positioned element for it to reference, it positions
itself by default with respect to the body element.
The top border of the outer div is set to red so you can see where
it is. Its margins push it 50 pixels down and 40 pixels left of the top
corner of the browser window. Because the inner div??™s position
property is set to absolute, it is positioned relative to body, because
body is the default positioning context. It entirely ignores its parent
(outer div) element, and its top and left properties offset it with
respect to body, as shown in Figure 4.25.
The text should properly be wrapped
in a paragraph to de?¬? ne it semantically,
but for clarity in this demo, I
have just put the text directly into
the inner div.
STYLIN??™ WITH CSS - CHAPTER 4 126
FIGURE 4.25 Although the inner div
(gray background) is inside the outer
div (indicated by its red top border)
in the markup, its absolute display
positioning dictates that, without any
other relative positioned element
to use as a context, it positions itself
relative to the body element.
Pages:
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170