Tutorial 24: Fixing Frames with Fixed Positioning - HTML with Style

Tutorial 24: Fixing Frames with Fixed Positioning

How fixed positioning works

In Tutorials 14 and 15 I introduced you to the horrible world of HTML frames. A great part of these tutorials was devoted to explaining the trouble with frames. The conclusion was that although you can use some very dirty hacks to work around some of these problems, these hacks usually add more problems of their own.

Fixed positioning is a feature introduced in CSS2. fixed is a value of the position property that I introduced you to in Tutorial 18. So far, we have seen how you can use the absolute and relative values for this property to create complex layouts for your documents.

The fixed value works the same way as the absolute value, with one notable difference: The positioned block's containing block is defined by the viewport. You will remember that an absolutely positioned block is removed from the normal document flow and positioned relative to either the canvas or its nearest positioned ancestor element.

Note the difference (in CSS terms) between the canvas and the viewport. The canvas is a large flat space on which the document is rendered, and the viewport is the bit in your browser's window where the document appears. If the canvas is bigger than the viewport, only a part of the canvas will be visible at any time, and browser will usually allow you to scroll around the document using a scroll bar or something similar.

With fixed positioning, you can take an element and position it not just outside the document flow, but outside the canvas, and simply attach it to the viewport. This will mean that the element will not scroll with the rest of the document, but remain visible all the time. This effect is useful for things like a list of navigational links or a table of contents, and generally anything that people have used frames for so far.

However, before we go on to an example of how this is done, let's take a look at how this property is supported in various browsers.

Next Page...

https://www.internet.com/

URL: https://www.webreference.com/html/tutorial24/1.html

Produced by Stephanos Piperoglou
Created: August 24, 2000
Revised: August 29, 2000