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

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