
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:
-
See Also:
-
left,
right,
top,
bottom
Possible Values:
- absolute
Positions the element at a specific spot on the page.
-
Support:
-
W3C Standard | Internet Explorer | Netscape 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 Standard | Internet Explorer | Netscape 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 Standard | Internet Explorer | Netscape 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 Standard | Internet Explorer | Netscape 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
|
|