In each
case, I will leave paragraphs one, two, and four in the default static
positioning and alter the property value of paragraph three. I have
added the class specialpara for the third paragraph in the markup
(not shown), so I can change its position property without affecting
the other paragraphs.
Static Positioning
First, let??™s see our four paragraphs all with the default position of
static (Figure 4.19).
FIGURE 4.19 With the four paragraphs
each displayed with the
default position property value,
static, they stack one above the
other, as normal document ?¬‚ ow
dictates.
POSITIONING ELEMENTS 121
With static positioning, each element is simply laid out one after
the other, so the paragraphs appear under each other, with their
default margin settings creating the space between them.
To break away from this sequential layout of elements provided by
the default static positioning, you must change a box??™s position
property to one of the three other possible values.
Relative Positioning
Let??™s set the third paragraph to the relative position. You can then
move this paragraph with respect to its default position using the
properties top, left, bottom, and right. Normally, providing values
for just top and left produces the result you want. In this example
p#specialpara {position:relative; top:30px; left:20px;}
produces the result shown in Figure 4.
Pages:
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165