20.
FIGURE 4.20 Relative positioning
allows you to use the left and right
properties to move the element with
respect to its normal position in the
document ?¬‚ ow.
Now the top of your paragraph is moved down by 30 pixels and right
by 20 pixels. However, as you have noticed, although the element
moves relative to its original position, nothing else changes. The
space occupied by the original static element is retained, as is the
positioning of the other elements.
STYLIN??™ WITH CSS - CHAPTER 4 122
The lesson here is that if you move an element in this way, you
must allow space for it. In the example shown in Figure 4.19, you
might take the next step of adding a margin-top value of 30 pixels or
greater to the fourth paragraph to move it down, thus preventing it
from being overlapped by the repositioned third paragraph.
Absolute Positioning
Absolute positioning is a whole different animal from static and
relative, since this type of positioning takes an element entirely out
of the ?¬‚ ow of the document. Let??™s modify the code you used for relative
positioning by changing relative to absolute
p#specialpara {position:absolute; top:30px; left:20px;}
Figure 4.21 shows the results.
FIGURE 4.21 Absolute positioning
enables you to remove an element
from the document ?¬‚ ow and position
it with respect to another element
??”here, the default positioning
context, body.
Pages:
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166