CSS left property

This CSS property specifies the left offset for the horizontal positioned elements and does not affect the non-positioned elements. It is one of the four offset properties that are right, top, and bottom.

When both left and right properties are defined, the right value has a preference if the container is right-to-left, and the left value has preference if the container is left-to-right.

The effect of this property depends on how the corresponding element is positioned, i.e., the value of the position property. The left property does not affect when the position property is set to the value static.

The effects of this property on positioned elements other than the value static are listed as follows:

When the element is absolutely or fixed positioned (i.e., position: absolute; and position: fixed;), the left property specifies the distance between the element's left edge and the left edge of its containing block (ancestor to which the element is relatively positioned).
If the element is relatively positioned (i.e., position: relative;), the left property sets the element's left edge to the left/right from its normal position.
If the position is set to sticky, e., position: sticky; then the positioning context is the viewport. When the element is inside the viewport, the left property behaves like its position is relative. When the element is outside, the left property behaves like its position is fixed.

Syntax

Property Values

The values of this property are defined as follows:

auto: This is the default value. It allows the browser to calculate the left edge position.

length: This value defines the position of left property in px, cm, pt, etc. It allows negative values.

percentage: This value defines the position of left property in percentage (%). It is calculated to the width of the element's containing block. It also allows negative values.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Example

In this example, there are four absolutely positioned (i.e., position: absolute;) div elements. We are applying the left property to them. The div elements with left: initial; and left: auto; will overlap because of having similar dimensions and default values.

In the output, we can see the div element with the yellow border is with the left: auto; and the div element with the light blue border is with the left: initial;.

<!DOCTYPE html>
<html>
<head>
<title>
CSS left Property
</title>
<style>

div{
position: absolute;
width: 200px;
height: 200px;
font-size: 30px;
}
#len {
left: 250px;
border: 5px solid lightgreen;
}
#per {
left: 65%;
border: 5px solid blue;
}
#auto {
left: auto;
border: 8px solid yellow;
font-size: 40px;
}

#init {
left: initial;
border: 5px solid lightblue;
}

</style>
</head>

<body>
<h1> Example of the left Property </h1>

<div id = "len"> left: 250px; </div>
<div id = "per"> left: 65%; </div>
<div id = "auto"> left: auto; </div>
<div id = "init"> left: initial; </div>
</body>
</html>

Test it Now

Output

Example

In this example, there are four relatively positioned (i.e., position: relative;) div elements. We are applying the left property on them.

<!DOCTYPE html>
<html>
<head>
<title>
CSS left Property
</title>
<style>

div{
position: relative;
width: 150px;
height: 100px;
font-size: 30px;
}
#len {
left: 250px;
border: 5px solid lightgreen;
}
#per {
left: 65%;
border: 5px solid blue;
}
#auto {
left: auto;
border: 5px solid red;
}

#init {
left: initial;
border: 5px solid lightblue;
}

</style>
</head>

<body>
<h1> Example of the left Property </h1>

<div id = "len"> left: 250px; </div>
<div id = "per"> left: 65%; </div>
<div id = "auto"> left: auto; </div>
<div id = "init"> left: initial; </div>
</body>
</html>

Test it Now

Output