CSS left property
CSS is all about presentation. Discover how CSS left property works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute defines the horizontal position's left offset solely for positioned elements, without impacting non-positioned elements. It is part of a quartet of offset properties including right, top, and bottom.
When both the left and right properties are specified, the right value takes precedence in a right-to-left container, while the left value takes precedence in a left-to-right container.
The impact of this characteristic varies based on the placement of the related element, specifically determined by the setting of the position property. The left attribute remains unaffected if the position property is configured as 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
left: auto | length | percentage | initial | inherit;
Property Values
The values associated with this attribute are specified in the following manner:
The default value 'auto' enables the browser to automatically determine the position of the left edge.
The length parameter determines the placement of the left property in units such as pixels, centimeters, points, and so on. It also supports negative values.
percentage: This parameter specifies the placement of the left property in terms of a percentage (%). The calculation is based on the width of the block that contains the element. Negative values are also permitted within this parameter.
It assigns the property to its initial default value.
Acquire: It acquires the attribute from its preceding element.
Example
In this instance, there are four div elements positioned absolutely using the CSS property position: absolute. The left property is being assigned to these elements. Due to their identical dimensions and default values, the div elements with left: initial; and left: auto; will overlap.
In the result, the div element featuring a yellow border is styled with left: auto;, while the div element with a light blue border is styled with 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>
Output
Example
In this instance, there are four div elements with a position property set to relative. The left property is being implemented on these elements.
<!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>
Output
