left

The left CSS property specifies part of the position of positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the left margin edge of the element and the left edge of its containing block.

Initial value	auto
Applies to	positioned elements
Inherited	no
Percentages	refer to the width of the containing block
Media	visual
Computed value	if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation type	a length, percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

/* <length> values */
left: 3px;
left: 2.4em;

/* <percentage>s of the width of the containing block */
left: 10%;

/* Keyword values */
left: auto;

/* Global values */
left: inherit;
left: initial;
left: unset;

Values

<length>

Is a negative, null, or positive <length> that represents:

• for absolutely positioned elements, the distance to the left edge of the containing block
• for relatively positioned elements, the offset that the element is moved left from its position in the normal flow if it wasn't positioned.

<percentage>

Is a <percentage> of the containing block's width, used as described in the summary.

auto

Is a keyword that represents:

• for absolutely positioned elements, the position of the element based on the right property and treat width: auto as a width based on the content.
• for relatively positioned elements, the left offset of the element from its original position based on the right property, or if right is also auto, do not offset it at all.

Formal syntax

<length> | <percentage> | auto

Examples

CSS Content

#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5C5C5C;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

#example_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #D8F5FF;
}

#example_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #C1FFDB;

}
#example_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #FFD7C2;
}

#example_4 {
  width:200px;
  height:200px;
  position:absolute;
  bottom:10px;
  right:20px;
  background-color:#FFC7E4;
}

HTML Content

<div id="wrap">
  <div id="example_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
  </div>

  <div id="example_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>
  </div>
</div>

Live sample

Specifications

Specification	Status	Comment
CSS Transitions The definition of 'left' in that specification.	Working Draft	Defines left as animatable.
CSS Level 2 (Revision 1) The definition of 'left' in that specification.	Recommendation	Initial definition

Browser compatibility

See also

• position, right, bottom, left