Relative Positioning

When you position an element relative, it is shifted from its normal place, but the space it would have occupied doesn't disappear.

Its containing block is the area that the element would occupy if it were not positioned.

Simply said: the element is initially positioned following the normal flow rules. Surrounding boxes are positioned accordingly. Then, the box is moved according to its offset properties. Notice that the element remains in the normal flow.

Relatively positioned elements can establish a new containing block for positioned (relative or absolute) descendant elements. In this case, there's a difference between a block element and an inline element.

If the relatively positioned element is a block element, it will establish a new containing block and positioned elements within it will use the "offset" position of that element as a base for positioning. If it is and inline element, its offsets are not combined with the offsets of its positioned descendants. Instead, they are based on the same containing block used by the relatively positioned element.

Absolute Positioning

When an element is absolutely positioned, it is completely removed from the normal flow and positioned with respect to its containing block.

The space the element would have taken up in the normal flow is closed up. It's as if the element doesn't exist. Because it is removed from the normal flow, it has no effect on boxes in that flow.

Absolutely positioned elements are always treated as block-level elements, hence they establish a new containing block for any descendants (i.e., any elements contained within the absolutely positioned element). This brings us at the relationship "absolute positioning and containing block".

Unlike relative positioning, where the offsets are measured from the element's position in the normal flow, an absolutely positioned element is offset from its container block.

The containing block for an absolute positioned element differs a bit from that for other elements.
The containing block for an absolutely positioned element is established by its closest, positioned ancestor. In other words, the nearest element outside it that has a position of absolute, relative or fixed. If there is no such ancestor element, the initial containing block (the browser window aka the viewport) is used.

For non-absolutely positioned elements the containing block of their closest, block-level ancestor is used. For absolute elements the containing element can be an inline element and not necessarily a block-level element.

One word of caution: in browsers that support CSS you can specify all four edges and let the browser compute the width and the height. But because you'll have to deal with IE, you'll find out that this doesn't work in IE. It's almost always necessary to specify at least the width of an absolutely positioned element for IE.

Fixed Positioning

Fixed positioning is exactly the same as absolutely positioning. Erhm... well not exactly: the difference is that the containing block of a fixed element is always the viewport.

The element is removed from the normal flow and doesn't have a position relative to any part of the document.

Now this might sound interesting. You might be tempted to think "hey, i can make a frame-style interface with this." Alas! Not all browsers support this at this moment. And yes, IE is one of them (but what did you expect?).

More on positioning

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.

Friends

People who have been good enough to me that I would call them friends.

You can get your W3C stuff at the W3C site

The W3C Logo

It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.

The Creative Commons Licence logo