W3docs
en
Log in

CSS left Property

How to use the left CSS property to set the left position of an element in combination with the position property. See the property values in use.

The left property defines the horizontal offset of a positioned element relative to its containing block.

It specifies the distance between the element's left margin edge and the left edge of its containing block. If position is set to static, the left property has no effect.

The effect of left depends on how the element is positioned (see position property).

  • If position is set to absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing block.
  • If position is set to relative, the left property specifies the distance the element's left edge is moved to the right from its normal position.
  • If position is set to sticky, the left property offsets the element relative to its containing block. The element behaves like relative positioning until it crosses a scroll threshold, after which it behaves like fixed positioning.
  • If position is set to static, the left property has no effect.
Initial Valueauto
Applies toPositioned elements.
InheritedNo.
AnimatableYes. Position of the element is animatable.
VersionCSS2
DOM SyntaxObject.style.left = "50px";

Syntax

Syntax of CSS left Property

left: auto | length | initial | inherit;

Example of the left property:

Example of CSS left Property with position property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <p>Here the left property is defined as 35px.</p>
    <img src="/build/images/w3docs-logo-black.png" alt="CSS left property" />
  </body>
</html>
Try it Yourself »

Result

CSS left Property

Example of using the left property when the image is inside a <div> element:

Example of CSS left Property with the img tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        height: 150px;
        width: 400px;
        background-color: #ccc;
        color: #666;
        padding: 10px;
      }
      img {
        position: absolute;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div>
      <img src="/build/images/w3docs-logo-black.png" alt="CSS left property" /> This is some div element for
      <br /> which the left side is defined
      <br /> as 200px.
    </div>
  </body>
</html>
Try it Yourself »

Example of the left property specified with percentages:

Example of CSS left Property with percentage value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        position: absolute;
        left: 20%;
        top: 20%;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="example">left: 20%</div>
  </body>
</html>
Try it Yourself »

Example of the left property with all the values:

Example of CSS left Property with auto, px and % (percentage)values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        position: absolute;
        left: auto;
        width: 100px;
        height: 100px;
        background-color: #ccc;
      }
      .box2 {
        position: absolute;
        top: 190px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: #444;
        color: #fff;
      }
      .box3 {
        position: absolute;
        left: 10%;
        top: 50%;
        width: 100px;
        height: 100px;
        background-color: #666;
        color: #fff;
      }
      .box4 {
        position: absolute;
        left: 20%;
        top: 70%;
        width: 100px;
        height: 100px;
        background-color: #777;
        color: #fff;
      }
      .box5 {
        position: absolute;
        left: -20px;
        top: 90%;
        width: 100px;
        height: 100px;
        background-color: #999;
        text-align: right;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="box1">left: auto</div>
    <div class="box2">left: 50px</div>
    <div class="box3">left: 10%</div>
    <div class="box4">left: 20%</div>
    <div class="box5">left: -20px</div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
autoThe browser will set the left edge position. It is the default value of this property.Play it »
lengthSets the left edge position in px, cm etc.. Negative values are allowed.Play it »
%Sets the left edge position as a percentage of the containing block's width. Negative values are allowed.Play it »
initialMakes the property use its default value.Play it »
inheritInherits the property from its parents element.

Note: On positioned elements, left defines the horizontal offset from the containing block. If both left and margin-left are specified, left takes precedence for positioning calculations.

Practice

Practice

What can be achieved with the 'left' property in CSS?