CSS: The Definitive Guide, 3rd Edition (50 page)

Read CSS: The Definitive Guide, 3rd Edition Online

Authors: Eric A. Meyer

Tags: #COMPUTERS / Web / Page Design

There are two small variations to point out. In horizontal layout,
either
rightor
leftcan be placed according to the static position if their values are
auto. In vertical layout, only
topcan take on the static position;
bottom, for whatever reason, cannot.

Tip

As of this writing, no version of Internet Explorer, including IE7, supports
the vertical-centering behavior of
autotop
and bottom margins on absolutely positioned elements.

Also, if an absolutely positioned element's size is overconstrained in
the vertical direction,
bottomis ignored.
Thus, in the following situation, the declared value of
bottomwould be overridden by the calculated value of
5em:



element D

There
is no provision for
topto be ignored if the
properties are overconstrained.

Placing and sizing
replaced elements

Positioning rules are different for nonreplaced
elements than they are for replaced elements. This is because replaced elements
have an intrinsic height and width, and therefore are not altered unless
explicitly changed by the author. Thus, there is no concept of "shrink to fit" in
the positioning of replaced elements.

The behaviors involved in
placing and sizing replaced elements are most easily expressed by a series of
rules to be followed in order:

If
widthis set to
auto, the used value of
widthis determined by the intrinsic width of
the element's content. Thus, if the width of an image is 50 pixels, then the
used value is calculated to be
50px. If
widthis explicitly declared (that is,
something like
100pxor
50%), then the width is set to that
value.
If
lefthas the value
autoin a left-to-right language, replace
autowith the static position. In
right-to-left languages, replace an
autovalue for
rightwith the static
position.
If either
leftor
rightis still
auto(in other words, it hasn't been replaced in a previous
step), replace any
autoon
margin-leftor
margin-rightwith
0.
If, at this point, both
margin-leftand
margin-rightare still defined to be
auto, set them to be equal, thus
centering the element in its containing block.
After all that, if there is only one
autovalue left, change it to equal the remainder of the
equation.

This leads to the same basic behaviors we saw with absolutely
positioned nonreplaced elements, as long as you assume that there is an explicit
width for the nonreplaced element. Therefore, the following two elements will have
the same width and placement, assuming the image's intrinsic width is 100 pixels
(see
Figure
10-50
):


style="position: absolute; top: 0; left: 50px; margin: 0;">

it's a div!

Figure 10-50. Absolutely positioning a replaced element

As with nonreplaced elements, if the values are overconstrained, the
user agent is supposed to ignore the value for
rightin left-to-right languages and
leftin right-to-left languages. Thus, in the following example, the
declared value for
rightis overridden with a
computed value of
50px:


style="position: absolute; top: 0; left: 50px; right: 125px; width: 200px;
margin: 0;">

Similarly,
layout along the vertical axis is governed by a series of rules that
state:

If
heightis set to
auto, the computed value of
heightis determined by the intrinsic height of
the element's content. Thus, the height of an image 50 pixels tall is
computed to be
50px. If
heightis explicitly declared (that is,
something like
100pxor
50%) then the height is set to that
value.
If
tophas the value
auto, replace it with the replaced element's
static position.
If
bottomhas a value of
auto, replace any
autovalue on
margin-topor
margin-bottomwith
0.
If, at this point, both
margin-topand
margin-bottomare still defined to be
auto, set them to be equal, thus
centering the element in its containing block.
After all that, if there is only one
autovalue left, change it to equal the remainder of the
equation.

As with nonreplaced elements, if the values are overconstrained,
the user agent is supposed to ignore the value for
bottom.

Thus, the following markup would have the results
shown in
Figure
10-51
:


style="position: absolute;
top: 0; left: 0; margin: 0;">
style="position: absolute;
top: 0; left: 60px; margin: 10px 0; bottom: 4377px;">
style="position: absolute;
left: 0; width: 100px; margin: 10px; bottom: 0;">
style="position: absolute;
top: 0; height: 100px; right: 0; width: 50px;">
style="position: absolute;
top: 0; left: 0; bottom: 0; right: 0; margin: auto;">