howto / css-positioning

Basics of CSS positioning

There are four different positioning schemes that one has to choose from: normal, relative, float and absolute

Normal is the default mode

Block boxes flow vertically, and inline boxes flow horizontally. Vertical margins are collapsed instead of being combined - the larger of two adjacent boxes is used.

Relative

Elements are initially placed like "normal" elements. However, an offset can be specified, and the box moved accordingly.

Descendant blocks compound.

Float

Possible float choices are either right, left, none or inherit. Vertically, it's treated as a normal type, but horizontally, it's shifted to the edge of the current container's padding. Inline content can flow around it. These boxes should have a width defined, so that they don't stretch to fill the container.

Vertical margins are not collapsed like in normal mode. Floated boxes can overlap, and the next box may ignore it's borders, starting where the previous one left off.

Adjacent floated elements will line up so that their tops are on the same vertical line - if there is enough horizontal space for it. Otherwise, the second one will move down below. This can be altered by specifying an option like "clear: right;", options include: left, right, both, none or inherit.

Absolute

These have no effect on boxes in the normal flow, and are always treated as block elements. The position is determined by it's offset characteristics - which measure the space away from the inside of the container block.

Boxes that use absolute positioning orient themselves according to their containing element, but aren't constrained to remain within it. In other words, it can overlap with the boundary of it's container.

Fixed

Much like absolute, fixed specifies exactly where something should be placed in the page. However, fixed items don't move when the user scrolls their browser window. Unfortunately, this isn't supported by various browsers, although fixed background images are more widely supported.

Stacking order

OK, so what if some of my elements overlap - how do I specify which should be on top of which? The stacking order is defined in this priority:

• stacking context - determined by the box's container
• z-index (z-index: 100;) arbitrary ordering
• source order - this is a stack, so first listed is at the bottom

More information

Brainjar.com's CSS Positioning Tutorial

W3C's Visual formatting model

$Id: css-positioning.html,v 1.4 2006/07/14 05:39:22 willn Exp $