CSS Properties Index   Positioning Properties

---

Sets or retrieves the left position of an object.

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

auto	Default position according to the 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.

The left property sets the horizontal position of a positioned element.

The effect of left depends on how the element is positioned ( the value set for the position property )

• When position is set to absolute or fixed, the left property specifies the distance between the outer edge of the element’s left margin and the inner border of the containing block’s left edge.
• When position is set to relative, the left property specifies the distance the element’s left edge is moved. A positive value moves it to the right. A negative value moves it to the left.
• When position is set to sticky, the left property is used to compute the sticky-constraint rectangle.
• When position is set to static, the left property has no effect.

Its returned 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 the absolute left positions of multiple elements.

<div style="position: absolute; top: 640px; left: 230px">
   <img src="/shared/images/mercury.gif" width=50px title="Mercury">
</div>

<div style="position: absolute; top: 610px; left: 300px">
   <img src="/shared/images/venus.gif" width=75px title="Venus">
</div>

 Show me 

The sample below uses inline event handlers to dynamically change an object’s left position in response to mouse events. A transition is applied to illustrate the change in position.

<img id="img" src="../shared/images/someImage.jpg"
   style="position: relative; left: 0px" 
   onclick="this.style.left='400px'"
   ondblclick="this.style.left='0px'">

 Show me 

bottom, right, top, pixelLeft, posLeft