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: 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:

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

See Also:

right, top, bottom

Possible Values:

auto
The default position according to the normal HTML layout.

Support:

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

[length]
An absolute position.

Support:

W3C StandardInternet ExplorerNetscape 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 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: layout-grid-type | Next Style: letter-spacing |