CSS Property left

left defines the offset for the left edge of a positioned element.


Initial value auto
Inherited No.
Version CSS2
JavaScript syntax object.style.left="5px"
Applies to Positioned elements (position value is not static).

CSS Syntax

left: length | percentage | auto | inherit

Property Values

The property values are listed in the following table.

auto Default value. The browser does the calculation.
length Set left in px, cm, etc. Negative values allowed
% Sets the left edge position in % of containing element. Negative values allowed
inherit Inherit the left property from the parent element

Browser compatibility

left Yes Yes Yes Yes Yes


An example showing how to use left CSS property.

div {<!--  w w w.  j  a  v a2s . c  o  m-->
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid rgb(200, 200, 200);
    z-index: auto;
div#one {
    background: pink;
    top: 10px;
    left: 10px;
div#two {
    background: lightblue;
    top: 20px;
    left: 20px;
div#three {
    background: yellowgreen;
    top: 30px;
    left: 30px;
div#four {
    background: orange;
    top: 40px;
    left: 40px;
        <div id='one'></div>
        <div id='two'></div>
        <div id='three'></div>
        <div id='four'></div>

Click to view the demo