CSS left Property

CSS left property specifies the horizontal position of a positioned element in the layout. It basically specifies the position of the left edge of an element.

The left property has no effect on non-positioned elements. An element is called non-positioned if its status is static. That is, the left property will not affect elements having position: static;.

The effect of the left property varies with the position property i.e.

  • If the position of the element is relative, the element adjusts itself relative to its original(default) position.

In the example below, the <div> element moves 60px right from its original(default) position, as we have specified left: 60px;. In simple words, the left edge of the <div> element will be 60px away from its original position. Try it out:

Example:

div{
  position: relative;
  left: 60px;
}

  • If the position of the element is absolute, the element adjusts itself relative to the nearest positioned ancestor. If the element has no positioned ancestor, it adjusts itself relative to the viewport.

In the example below, the <div> element moves 60px away from the left edge of the viewport, as it has no positioned ancestor and we have used left: 60px;. In simple words, the left edge of the <div> element will be 60px away from the left edge of the viewport. Try it out:

Example:

div{
  position: absolute;
  left: 60px;
}

The left property can also accept a negative value. In this case, the content of the element starts flowing out the viewport, and some part of it is clipped based on the left property value. Refer to the example below:

Example:

div{
  position: absolute;
  left: -60px;
}

CSS Syntax

The left property has the below syntax:

left: auto|length|%|initial|inherit;

Property Values

The left property accepts the following values:

autoThe browser itself calculates the left position of the element. This is the default value.
lengthSpecifies the left position of the element in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. Negative values are also allowed.
%Specifies the left position of the element in percentage(%). The percentage value is calculated from the parent element’s total height. Negative values are also allowed.
initialSets the left property to its default value(auto).
inheritInherits the left property from the parent element.

general Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.left= “60px”;