This page is In Progress

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

left

Summary

Sets the left edge of an element

Overview table

Initial value
auto
Applies to
All elements
Inherited
No
Media
visual
Computed value
If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto’.
Animatable
Yes
CSS Object Model Property
left

Syntax

  • left: auto
  • left: length
  • left: percentage

Values

auto
Default. Default position, according to the regular HTML layout of the page.
length
Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference.
percentage
Integer, followed by a percent sign (%). The value is a percentage of the width of the parent object.

Examples

We demonstrate the `left` property by positioning the elements.

.container {
  /**
   * Object is positioned according to the normal flow, and then offset.
   */
  position: relative;
}

.absolutely-positioned-within-container {
  /**
   * Object is positioned relative to nearest positioned ancestor—or
   * to the initial containing block if no positioned ancestor exists.
   * Here, the nearest positioned ancestor is the `div.container`.
   */
  position: absolute;
  /**
   * Offsets this element 25px towards the left from the container's left edge.
   * Note: `length` can also be specified in other units of measurements.
   */
  left: 25px;
}

.absolutely-positioned-within-body {
  /**
   * Here, the nearest positioned anscestor does not exist, hence
   * the coordinate system reference becomes the initial containing block,
   * i.e. the `body`.
   */
  position: absolute;
  /**
   * Offsets this element 350px towards the left of the initial containing
   * block's left edge i.e. the `body`'s left edge.
   */
  left: 350px;
}

.relatively-positioned {
  /**
   * Object is positioned according to the normal flow, and then offset.
   */
  position: relative;
  /**
   * The layout for this element happens according to the normal flow.
   * But because this element is positioned relatively, it will be
   * offset 300px towards the left from where it would have been in
   * the normal flow.
   */
  left: 300px;
}

View live example

The HTML for the above example.



<article>
  <div class="container">
    <p class="box absolutely-positioned-within-container">Absolutely positioned within <code>div.container</code> at 25px from the left.</p>
    <p class="box relatively-positioned">This is relatively positioned at 300px from the left.</p>
  </div>

  <p class="box absolutely-positioned-within-body">This is absolutely positioned within the <code>body</code> at 350px from the left.</p>
</article>

See also

Related articles

Box Model

Related pages

Attributions