
The Complete Idiot's Style Sheets Reference
| Index
| Current Category: Positioning |
| Previous Style: layout-grid-type
| Next Style: letter-spacing
|
left
The element's position from the left side of the browser window (if you're using position: absolute or position:fixed) or to the left of the element's natural position in the page (if you're using position: relative).
Support:
-
See Also:
-
right,
top,
bottom
Possible Values:
- auto
The default position according to the normal HTML layout.
-
Support:
-
W3C Standard | Internet Explorer | Netscape Navigator |
CSS2 and later |
4.0 and later |
Not supported |
- [length]
An absolute position.
-
Support:
-
W3C Standard | Internet Explorer | Netscape Navigator |
CSS2 and later |
4.0 and later |
4.0 and later |
-
Notes:
-
You can use negative numbers.
- [percentage]
The position as a percentage of the current block size.
-
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: layout-grid-type
| Next Style: letter-spacing
|
|