Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

Absolute Positioning 295

11


The first

is positioned using the left and top properties, and no size is specified.
The left and top edges of the box are positioned as described in the style sheet, but the
right side of the box runs to the edge of the page, just as it would in normal flow, and the
box’s height is derived from the content in it, again just as it would be in normal flow.


The second

has all four positioning properties set, which indicates exactly where
all four edges of the box should appear. This establishes the exact size of the box, and if
the content is larger than the box, it is treated as overflow. In this case, positioning also
specifies the size of the box.


In the third example

, I use the bottom and right properties to position the box in
the bottom-right corner of the page and the height and width properties to specify the
size of the box. This is the preferred method of combining positioning and sizing. Rather
than specifying all four positions, you should position one corner of the box (whichever
makes the most sense) and then use height and width to specify a size. If you specify
positions for all four sides of the box and you include a height and width, the size of the
box will be taken from the size properties, and the position will be set using the top and
left properties. The bottom and right properties would be ignored completely.


Nesting Absolutely Positioned Elements........................................................


As you may remember, absolutely positioned elements are positioned relative to the
closest positioned ancestor. So when you nest an absolutely positioned element within
another element that’s positioned absolutely or relatively, the positioning will be relative


FIGURE 11.4
How size and posi-
tioning interact.