Positioning Elements
Written by Jen

If you want something on your page to be positioned in an exact location, then you will have to use certain positioning tags. These are usually based on exact pixels, but no measurements are necessary as you can guess and check. Positioning works on an entire page, so be prepared to have a layering effect.

The basic position is static. That is when everything is wherever it's supposed to be when you have no CSS or HTML to move it. The code for that is:

div {position: static;}

You won't need to place this code anywhere unless you need to override a previous position tag.

The next position is relative. This is when it's relative to the position of where it would have been had you not had any positioning codes placed in. You would then use the following code:

div {position:relative; top:pixels; left:pixels;}

top is how many pixels away from the top. The higher the pixel, the further away from the top it will be. left is how close to the left you want it to be. The smaller the pixel number, the closer to the left it will be. For both, you can also have negative numbers. Negative numbers will move it on the oppposite side of where the element would normally be placed. It's really confusing to describe, so experiment and you'll get it. This is not a particularly useful property but it can come in handy in certain circumstances.

Now comes the most important position property: absolute. This is an absolute position on a page, defined by specific dimensions. You will need to define the position from the top, position from the left and perhaps the width and height as well. This would give you something that looks like:

div {position:absolute; top:pixels; left:pixels;}

You can also specify your position from the right or bottom, although that's not recommended since your page will scroll if you add to much information and then your positioning would be altered as a result.

You can also specify the width and height, if it can have a width and height that is, and you can literally place it anywhere on the page. If the pixels you specify is off the page then the page will scroll to accomodate it.