CSS Positioning Properties

How to position elements on the page

DHTML Pit Stop | CSS Index | CSS Properties | HTML List

Home/DHTML/CSS/Positioning Properties

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

Possible Values:
static
absolute
relative

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

Possible Values:
number of pixels
percentage

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>

And now you get the text, 10 pixels from the top of the browser window. See an example by clicking the link below:

Example (new window)

left

Possible Values:
number of pixels
percentage

Defines the position of an element from the left 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 left property:

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

And you get the following, 100 pixels from the left of the browser window. See an example by clicking the link below:

Example (new window)

Well, that does it for the positioning properties for now, see you in the next section: The Text Properties.

By: John Pollock