ptg16476052Fixed Positioning 30111
Fixed Positioning
Fixed positioning is similar to absolute positioning. Elements are positioned using the
same properties, and fixed elements are removed from the normal flow. The difference is
that rather than being positioned in relation to their containing block, fixed elements are
positioned relative to the viewport. The obvious question is, what’s the viewport?
When all of the elements on a page are laid out in the normal flow, that page may be 300
pixels wide and 100 pixels tall if it’s very small, or it may be 1000 pixels wide and 8000
pixels tall if it’s a long article. In the meantime, the browser window has its own size,
perhaps 900 pixels wide and 700 pixels tall. The viewport is the part of the HTML page
that is currently being displayed in the browser window.
When you apply the fixed positioning scheme to an element, the viewport is treated as
the containing block, and the positioned elements remain in that position if the contents
of the viewport change through scrolling or resizing the window. Here’s an example.
You may create a restaurant website that shows the hours, address, and phone number at
FIGURE 11.8
An image with large
links overlaid.