Okay, now it is time to look at the positioning properties. I moved these off the other page because I had to put this page inside one big table to make sure everyone saw the same thing....with all those screen resolutions out there......

position

The position property lets you define the postition a section in the browser window. The default is "static", which places it wherever you wrote the code. Using "absolute" allows you to place a section exactly where you want it using the number of pixels from the top and left of the browser window.

Here is an example of placing some text in an absolute position on the page:

<DIV style="position:absolute; top:20px; left:100px; border-style:double; width:300px">
This would have an exact position on the page
</DIV>

This will show up 20 pixels from the top and 100 pixels from the left of the browser window. See an example by clicking the link below:

Example (new window)

Not too bad, now let's see what top and left mean.

top

Defines the position of an element from the top of the browser window. Used when you have a position of "absolute". Can also be used when there is a position of "relative". Here is a sample of the top property in action:

<DIV style="position:absolute;top:10px;border-style:double;width:400px">
This would have an exact position from the top.(10 pixels)
</DIV>

<DIV style="position:absolute;left:100px;top:10px;border-style:double">
This would have an exact position from the left.(100 pixels)
</DIV>