CSS 2.1 Reference: left Property

The left property is used to set the left side position of an element's box. This property can be used for elements that have a position property value of relative, absolute, or fixed. The left property is used as follows:

• For elements with a position property value of relative - The left side of the element's box is offset from the left side of its normal flow position by the value of the left property. Positive values move the element's box to the right. For example, setting the left property value to 20px will place the left side of the element's box 20px to the right of its normal flow position.
• For elements with a position property value of absolute - The left side of the element's box is offset from the left side of its containing block by the value of the left property. Its containing block is the nearest ancestor element that has its position property set to relative, absolute, or fixed. Positive left property values move the element's box to the right. For example, setting the left property value to 20px will place the left side of the element's box 20px to the right of its containing block's left side.
• For elements with a position property value of fixed - The left side of the element's box is offset from the left side of its browser window by the value of the left property. Positive values move the element's box to the right. For example, setting the left property value to 20px will place the left side of the element's box 20px to the right of the browser window's left side.

This property is specified by using a length, percentage, or keyword, according to the syntax shown above. If a percentage value is used, the value will be a percentage of the containing block's width.

CSS Example: The left properties are set for 2 different elements which are using the relative and absolute position properties.

  #tst1 {position: relative; left: 40px;}
  #tst2 {position: absolute; left: 40px;}

• auto - The left side offset is automatically set by the browser.
• inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.