If you then set the position property of the outer div to relative,
the positioning context of the absolutely positioned inner div is
now the outer div, as shown in Figure 4.26. Setting the top and left
properties of the inner div now positions it with respect to the outer
div. If you now set the left and top position properties of the outer
div to anything other than zero, the inner div would move to maintain
its positioning relationship to the outer div??”its positioning
context. Get it?
FIGURE 4.26 Once the outer div
has a relative positioning, absolutely
positioned descendants position
themselves relative to it, as de?¬? ned
by their top and left attributes.
We??™ll look at a practical example of the uses of the position property,
right after we look at the display property.
If you use margins and padding
carefully, in most cases, all that you
need to organize your page layouts
is static positioning. Many beginning
CSS designers mistakenly set
the position property of almost
every element only to ?¬? nd it hard to
control all these freed-up elements.
Don??™t change the position property
of an element from the default
static unless you really need to.
POSITIONING ELEMENTS 127
The Display Property
Just as every element has a position property, every element also
has a display property. Although there are quite a number of display
property values, the most commonly used elements have a
default display property value of either block or inline.
Pages:
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171