CSS Property left








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

Summary

ItemValue
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.

ValueDescription
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




Example

An example showing how to use left CSS property.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
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;
}        
        </style>
    </head>
    <body>
        <div id='one'></div>
        <div id='two'></div>
        <div id='three'></div>
        <div id='four'></div>
    </body>
</html>

Click to view the demo