1. css
  2. /properties
  3. /left

left

Definition

The left property is used to set the horizontal position of an element relative to its containing element. It is typically used with the position property set to absolute or fixed to specify the exact location of the element on the page. If the position property is set to static or relative, the left property has no effect.

Examples

Setting left to 20px:

#element {
  position: absolute;
  left: 20px;
}

Setting left to 50%:

#element {
  position: absolute;
  left: 50%;
}

Setting left to calc(50% - 100px):

#element {
  position: absolute;
  left: calc(50% - 100px);
}

Values

ValueDescription
autoDefault value. The browser automatically sets the left margin to the default value.
<length>Sets the left margin to a specific length value (e.g. 10px).
<percentage>Sets the left margin to a percentage value of the containing element's width (e.g. 50%).
inheritSets the left margin to be the same as the parent element.
unsetThe left margin is set to its inherited value if any, otherwise it is set to the default value.

Best Practices

  • Use left property along with position: absolute or position: fixed to position an element relative to its containing element.
  • Use auto if you want the browser to automatically calculate the left margin for the element.
  • Avoid using left with position: static or position: relative as it has no effect.
  • Use percentage values with caution, as they can result in unexpected behavior on different screen sizes.
  • Use calc() to perform arithmetic operations on the left margin if needed.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes