HTML and CSS Reference
In-Depth Information
on the parent element, as I have done in Figure 6.1. The document, being
the root container, will similarly shrink, and you could potentially over-
flow your document and its scrollable area.
If the containing element isn't forced open—in this case by width on
the wide side and other content keeping it open in the vertical side—
then the parent container would collapse. If the content were shorter
and didn't keep the box open enough, what you might see is shown
in
Figure 6.2
.
Figure 6.2
A container
element
shrinking to fit
only the content
in the normal
document flow.
Absolute positioning is the most used method of positioning an element
(besides the default value of
static
) and is frequently used in animation;
however, it isn't used for many methods of creating layout grids because
it doesn't hold that scrollable area open like other methods do.
Fixed positioning is based on the viewport and not the document. The
origin for fixed-positioned elements is the root node (
<html>
). The top-
left position of 0, 0 would be the top-left corner of the viewport, and
similarly the bottom-right position of 0, 0 is the bottom-right corner.
As the name implies, fixed-positioned elements do not scroll with the
rest of a document. Because window and viewport sizes typically vary
widely (unless you're developing for a specific device or platform such
as the Apple iPhone), fixed positioning is most often used for small
