CSS left Property

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

The left property is used to set the left margin edge of the element and the left edge of its containing block for absolute or fixed positioned elements. If position is selected "static", left property won't have any 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 changes its position to relative when the element is inside the viewport, and changes to fixed when it is outside.
  • If position is set to "static", there won't be any effect.

Initial Value auto
Applies to Positioned elements.
Inherited No.
Animatable Yes. Position of the element is animatable.
Version CSS2
DOM Syntax Object.style.left = "50px";

Syntax

left: auto | length | initial | inherit;

Example of the left 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="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property">
  </body>
</html>

Result

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      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="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property">
      This is some div element for  <br> which the left side is defined  <br> as 150px.
    </div>
  </body>
</html>

Example of the left property specified with percentages:

<!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>

Example of the left property with all the 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>

Values

Value Description
auto The browser will set the left edge position. It is the default value of this property.
length Sets the left edge position in px, cm etc.. Negative values are allowed.
% Sets the left edge position in % of containing element. Negative values are allowed.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 5.0+


Do you find this helpful?

Related articles