Page Layout with CSS - HTML5 with CSS3 - page 318

Figure 9-20. The min-height property ensures there's always room for the positioned image
CSS also offers a similar min-width property as well as max-width and max-height ,
and you'll see them put to good use in Chapter 10.
As a consequence of being excluded from the normal content flow, absolutely positioned elements will
collapse to the width of their contents. Ordinarily, a block-level element defaults to the width of its parent
element, but once the element is out of flow, it loses that parental context and, in a sense, forgets how
wide it should be. In our example we didn't need to include a width property because we were positioning
an image, an element with an inherent width already, so its invisible box can collapse around it without
incident. If you're positioning other types of elements, especially any that contain text that can wrap and
change size, you'll probably need to define a width as well.
Fixed Positioning
In the fixed positioning model, an element is placed at a precise location in the browser window and
remains fixed to the spot, even when a viewer resizes or scrolls the window—the element won't budge
from its assigned position. Like absolute positioning, fixed positioning removes the element from the
normal content flow so other content on the page will behave as if the positioned element isn't even there.
The fixed element can overlap other content, including other positioned elements.
However, unlike absolute positioning, the positioning context for a fixed element is always the browser
window, even when it has a positioned ancestor. You can't offset a fixed element relative to some other
block of content on the page, nor to its initial position; offset properties relate to the edges of the browser
window itself. Because the fixed element no longer relates to any other content on the page, fixed
positioning is rarely useful for the classic page layout situations like creating columns or moving an