Absolute Positioning

Using absolute position allows you to place an image, box or text exactly where you want it by changing the values from the top and left of the browser window.

The code below puts an image 100 pixels from the top and 100 pixels from the left.

The code below puts two images 100 pixels from the top, the first image is 100 pixels from the left the second image is 500 pixels from the left.

The code below puts two images 100 pixels from the top, the first image is 100 pixels from the left the second image is 600 pixels from the left with text placed between the two images.

Relative Positioning

I think one of the easiest explanations of relative and absolute positioning is from echoecho.com and this is it.

If you define the position to be relative it will be relative to the position of the tag that carries the style. That is, if you add a relatively positioned layer in the middle of the page, then the position will be calculated from that exact spot in the middle of your page where it was added.

Still a bit tricky to understand eh. Well enough of the words look at the images below and all will become clear I hope.

Both images have been placed 50 pixels from the top and 50 pixels from the left, they have also had two line breaks (<br />) placed before the style code.

The image on the left is set at "position absolute" and will stay in that position regardless, whereas the image on the right which is "position relative" is governed by its surroundings (in this case two line breaks) so the image now moves 50 pixels below the line breaks giving it the relative position.

This link shows position relative when there is nothing to effect it.

©2006 CSS Magpie.  Back to Top or on to Layers