left

In this chapter you will learn:

Definition, default value, CSS version and JavaScript syntax for left
Syntax to create left property and meaning for each of its property value
An example showing how to use left CSS property

Description

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

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

Syntax and Property Values

left: length | percentage | auto | inherit

The property values are listed in the following table.

Value	Description
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

Example

<!DOCTYPE HTML><!--from  j  ava2s .  c  o  m-->
<html>
    <head>
        <style>
div {
    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>