[ Pobierz całość w formacie PDF ]

If both ’left’ and ’right’ are ’auto’ (their initial values), the computed values are ’0’
(i.e., the boxes stay in their original position).
If ’left’ is ’auto’, its computed value is minus the value of ’right’ (i.e., the boxes
move to the left by the value of ’right’).
If ’right’ is specified as ’auto’, its computed value is minus the value of ’left’.
If neither ’left’ nor ’right’ is ’auto’, the position is over-constrained, and one of them
has to be ignored. If the ’direction’ property is ’ltr’, the value of ’left’ wins and ’right’
becomes -’left’. If ’direction’ is ’rtl’, ’right’ wins and ’left’ is ignored.
Example(s):
Example. The following three rules are equivalent:
div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }
The ’top’ and ’bottom’ properties move relatively positioned element(s) up or down
without changing their size. ’top’ moves the boxes down, and ’bottom’ moves them
up. Since boxes are not split or stretched as a result of ’top’ or ’bottom’, the
computed values are always: top = -bottom. If both are ’auto’, their computed values
are both ’0’. If one of them is ’auto’, it becomes the negative of the other. If neither is
’auto’, ’bottom’ is ignored (i.e., the computed value of ’bottom’ will be minus the value
of ’top’).
Dynamic movement of relatively positioned boxes can produce animation effects
in scripting environments (see also the ’visibility’ property). Relative positioning may
also be used as a general form of superscripting and subscripting except that line
height is not automatically adjusted to take the positioning into consideration. See
the description of line height calculations [p. 152] for more information.
Examples of relative positioning are provided in the section comparing normal
flow, floats, and absolute positioning [p. 121] .
9.5 Floats
A float is a box that is shifted to the left or right on the current line. The most interest-
ing characteristic of a float (or "floated" or "floating" box) is that content may flow
along its side (or be prohibited from doing so by the ’clear’ property). Content flows
down the right side of a left-floated box and down the left side of a right-floated box.
The following is an introduction to float positioning and content flow; the exact rules
[p. 117] governing float behavior are given in the description of the ’float’ property.
A floated box must have an explicit width (assigned via the ’width’ property, or its
intrinsic [p. 30] width in the case of replaced elements [p. 30] ). Any floated box
becomes a block box [p. 101] that is shifted to the left or right until its outer edge
touches the containing block edge or the outer edge of another float. The top of the
floated box is aligned with the top of the current line box (or bottom of the preceding
block box if no line box exists). If there isn’t enough horizontal room on the current
2 Aug 2002 21:33
112
Visual formatting model
line for the float, it is shifted downward, line by line, until a line has room for it.
Since a float is not in the flow, non-positioned block boxes created before and
after the float box flow vertically as if the float didn’t exist. However, line boxes
created next to the float are shortened to make room for the floated box. Any content
in the current line before a floated box is reflowed in the first available line on the
other side of the float.
Several floats may be adjacent, and this model also applies to adjacent floats in
the same line.
Example(s):
The following rule floats all IMG boxes with class="icon" to the left (and sets
the left margin to ’0’):
img.icon {
float: left;
margin-left: 0;
}
Consider the following HTML source and style sheet:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLEFloat example/TITLE
STYLE type="text/css"
IMG { float: left }
BODY, P, IMG { margin: 2em }
/STYLE
/HEAD
BODY
PIMG src=img.png alt="This image will illustrate floats"
Some sample text that has no other...
/BODY
/HTML [ Pobierz całość w formacie PDF ]