CSS Attributes Index   Positioning Properties

---

Sets or retrieves the object’s position relative to the left edge of the next positioned object in the document hierarchy.

CSS	{ left: 'auto' | length | percentage }
Script	object.style.left = sLeft ]

auto	Default position according to the regular HTML layout of the page.
length	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
percentage	Value expressed as a percentage of the parent object’s height.

The property is read/write with a default value of auto; this attribute is not inherited.

This property is used with the position attribute. This value corresponds to the offsetLeft property of the object and does not include the border of the parent object.

When scripting the left property, use either the pixelLeft or posLeft property for numeric manipulation of a left value.

For more information about how to access the dimension and location of objects on the page through the document object model, see Measuring Element Dimension and Location.

The sample below shows how inline styles are used to set an element’s absolute or relative left position. One example positions the element relative to the left edge of its parent, the other specifies an element’s absolute left and top placement.

<div style="position:relative; left:300px">
<img src="../shared/images/sample.jpg"></div>
<div style="position:absolute; left:150px; top:315px">
<img src="../shared/images/sample.jpg"></div>

 Show me 

The sample below uses inline event handlers to dynamically change an object’s left position on an onclick event.

<img src="sample.jpg" onclick="this.style.left='300px'">

 Show me 

pixelLeft, posLeft