Positioning

Positioning allows you to precisely position an element using exact co-ordinates. You can layer positioned objects, overlap them, and determine which one is on top or bottom. Both ABSOLUTE and RELATIVE positioning use properties of LEFT and TOP to specify the positioned area. The values for these properties can be pixels, points, ems, inches, percentages, etc..

Absolute Positioning

Absolute positioning means that an object will be placed EXACTLY HERE on a web page. You can position anything from text to images and more.

Because absolute positioning is done on a "per object" situation, the example shown is an inline CSS command:

This will position the h3 text exactly 200 pixels from the left and 100 pixels from the top of the page. Be sure to include the semi-colon to separate the co-ordinates.

Relative Positioning

Relative positioning places the object in the specified area, using "where it would have been normally" positioning. (The object is placed on the page where is would normally go, then it gets moved to the specified position area.)

Here is a sample of raised bold text and normal text.

This will make the words "raised bold text" to be placed a bit to the right and up from where it would normally be in the line of text. Notice the negative value set for the TOP property. Since positioning usually flows towards the right and down, placing a negative value in will reverse the effect.

Layers

CSS has made some great improvements on what HTML can do. Now, it is possible to layer two or more objects and decide which one should be "above" the other. Layering is like placing down a picture, the placing another picture on top of it, and so on.

Layering is organized according to the order of the positioning commands. The order you place the positioned elements determines the importance of that object. Each positioned object becomes a "layer". Each additional layer becomes more and more important than the one before it, making it the top most visible.

Layers can be achieved with either the ABSOLUTE or RELATIVE positions. The following examples show relative layers.

• The first layer containing an image is placed down.
• A break tag puts the next command onto the next line.
• A second layer containing some text is placed down. It is more important than the first layer, so it shows "on top" of the first layer.

Add in a 3rd layer now:

The newest layer is more dominant than the first two. It is "on top" of all the previous layers. Each new layer added becomes the most dominant one.