There was a time that trying to figure out CSS positioning was as confusing as reading the health care bill in congress. Once I got the jist of the basics of positioning then it became much clearer in how to use them together. The beginning ‘key’ was to realize what the defaults were if nothing was declared. After that it was gravy.

Position

The position property (as you may have guessed) changes how elements are positioned on your webpage.

position: value;

Values:

• static
• relative
• absolute
• fixed

Now, what does all that mean?

Static

Static positioning is by default the way an element will appear in the normal flow of your (X)HTML file. It is not necessary to declare a position of static. Doing so, is no different than not declaring it at all.

position: static;

Relative

Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

position: relative;

Absolute

Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of its nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be positioned from the top left of the browser window.

position: fixed;

When positioning elements with relative, absolute or fixed values the following properties are used to offset the element:

• top
• left
• right
• bottom

position: absolute; top: 10px; right: 10px;