That other element is known as its positioning context. As you
saw in ???Absolute Positioning??? earlier, the positioning context of an
absolutely positioned element is body??”that is, unless you change it.
For example, body is the containing element of all other elements in
your markup, but you can use any ancestor element as a positioning
context of another element by changing the ancestor??™s position
value to relative.
Let??™s look at this markup
The outer div
This is some text...
and this CSS
div#outer_div {width:250px; margin:50px 40px; border-top:3px
solid red;}
div#inner_div {top:10px; left:20px; background:#AAA;}
POSITIONING ELEMENTS 125
FIGURE 4.24 Here are two nested
paragraphs. I??™ve added a red border
to the top of the outer div and
colored the inner div gray. Because
the inner div is static (default) positioning,
top and left properties are
ignored.
Any close study of this code begs the question: Why isn??™t the inner
div 10 pixels down from the top of the outer one and 20 pixels to
the left, as speci?¬? ed? Instead the two elements both share the same
origin (top-left) point. The answer is that the inner (and irrelevantly,
the outer) div has the default positioning of static. This means it
is in the regular document ?¬‚ ow, and because the outer div has no
content, the inner div starts in the same place.
Pages:
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169