The cover of The Complete Idiot's Guide to Create a Web Page The Complete Idiot's Style Sheets Reference

| Index | Current Category: Positioning |
| Previous Style: play-during | Next Style: quotes |


position

Detemines how an element is positioned on the page.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later 4.0 and later

See Also:

left, right, top, bottom

Possible Values:

absolute
Positions the element at a specific spot on the page.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later 4.0 and later

fixed
Same as absolute, except that the element is also fixed with respect to some stationary point.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported

Notes:
  • For example, a fixed element might not scroll when the page is scrolled.

relative
Positions the element according to where it would normally appear in regular HTML, and then offsets the element horizontally and vertically according.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later 4.0 and later

static
Positions the element according to where it would normally appear in regular HTML.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 4.0 and later 4.0 and later

Example:
<DIV STYLE="position: absolute; left: 600px; top: 150px">Section 1</DIV>
<DIV STYLE="position: absolute; left: 100px; top: 100px">Section 2</DIV>
<DIV STYLE="position: absolute; left: 500px; top: 50px">Section 3</DIV>
<DIV STYLE="position: absolute; left: 50px; top: 0px">Section 4</DIV>
This is regular text. Even though it comes after all those <DIV> 
tags, it still appears at the top of the page. That's because elements 
that are positioned absolutely aren't part of the regular document flow.
<P STYLE="position: relative; left: 200px">
This paragraph is shoved left from its normal position by 200 pixels 
using relative positioning
How It Looks:
See an example page that demonstrates this property.

| Index | Current Category: Positioning |
| Previous Style: play-during | Next Style: quotes |