In Figure 4.21, you can see that the space previously occupied by
the element is gone. The absolutely-positioned element has become
entirely independent of the surrounding elements in the markup,
and it is now positioned with respect to the top-level element, body.
And this brings us neatly to the important concept of positioning
context, which is the recurring subject of the rest of this chapter.
Let??™s start thinking about this concept by saying that the default
positioning context of an absolutely-positioned element is the body
element. As Figure 4.21 shows, the offset provided by the top and
left values moves the element with respect to the body element??”
the top ancestor container in our markup hierarchy??”not with
You can also use negative values for
top and left to move an element up
and to the left.
Although body is the default positioning
context, other elements can
be used as this context too, as we
will see shortly.
POSITIONING ELEMENTS 123
respect to the element??™s default position in the document ?¬‚ ow, as is
the case with relative.
Because the absolutely positioned element??™s positioning context
is body, the element moves when the page is scrolled to retain
its relationship to the body element, which also moves when the
page scrolls.
Before we see how we can use a different element than body as the
positioning context for an absolutely positioned element, let??™s cover
the last of the four positioning properties??”?¬? xed positioning.
Pages:
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167