CSS left Property

Set the left edge of the absolute positioned <div> element 80px to the right of the left edge of its nearest positioned ancestor:

div.absolute {
position: absolute;
left: 80px;
width: 200px;
height: 120px;
border: 3px solid #8AC007;
}

Try it Yourself »


Definition and Usage

For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its nearest positioned ancestor.

Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A “positioned” element is one whose position is anything except static.

For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.

Note: If “position:static”, the left property has no effect.

Default value: auto
Inherited: no
Animatable: yes. Read about animatable – Try it
Version: CSS2
JavaScript syntax: object.style.left=”100px” Try it
CSS Syntax
left: auto|length|initial|inherit;
Property Values
Value Description
auto Lets the browser calculate the left edge position. This is default
length Sets the left edge position in px, cm, etc. Negative values are allowed
% Sets the left edge position in % of containing element. Negative values are allowed
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit