B.55. left

This property lets you set the distance between the left edge of an absolute positioned element (including its padding, border, and margin)^[7] and the left edge of the positioning context in which it resides. The positioning context is the content area of the element's nearest ancestor that has a position property value other than static, or the body element.

^[7] The CSS2 specification contains an error that suggests that the padding, border, and margin of the positioned element should not be considered. This has been acknowledged as a mistake by the CSS Working Group in the Errata document for CSS2.

For relative positioned elements, this property sets a relative offset from the normal position of its left edge. So, a setting of 10px will shift the left edge of the box 10 pixels to the right, and a setting of -10px will shift it 10 pixels to the left.

Inherited: No

See also: Section B.90position, Section B.20bottom, Section B.118top, and Section B.93right

B.55.1. Value

A CSS length measurement, a percentage value, or the auto constant. Percentages are based on the width of the parent element. The auto constant tells the browser to determine the position of the left edge itself, based on whatever other constraints may exist on the size/position of the element.

Initial value: auto

B.55.2. Compatibility

CSS Version: 2

Supported by all CSS-compatible browsers, including Internet Explorer 4 or later, Netscape 4 or later, and Mozilla browsers.

B.55.3. Example

This style rule positions the element with ID menu 80% of the way from the left edge of the window and gives it a width of 19.9%. We don't use a full 20% for the width to prevent rounding errors in some browsers from generating a horizontal scrollbar.

#menu {
  position: absolute;
  left: 80%;
  width: 19.9%;
  height: 200px;
}