The left property in CSS is used to specify the horizontal position of a positioned element. It has no effect on non-positioned elements.
Note:
- If position property is absolute or fixed, the left property specifies the distance between the element left edge and the left edge of its containing block.
- If position property is relative, the left property specifies the distance of element left edge is moved to the right from its normal position.
- If position property is sticky, the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
- If position property is static, the left property has no effect.
- If both left and right properties are defined, the left value has precedence when the container is left-to-right and the right value has precedence when the container is right-to-left.
Syntax:
left: length|percentage|auto|initial|inherit;
Property Values:
- length: It is used to specify the length of left property. It accepts positive and negative values.
- percentage: It specifies the width of the containing block in percentage.
- auto:It is used to set left property to its default value.
- initial: It is used to specify the left property to its default value.
- inherit: It sets the left property from its parent.
Example 1: This example describes the position property to absolute.
HTML
<!DOCTYPE html><html>
<head>
<title>
CSS left Property
</title>
<style>
body {
color: Green;
text-align: center;
}
.GFG1 {
position: absolute;
left: 129px;
width: 500px;
height: 200px;
border: 5px solid orange;
}
.GFG2 {
position: absolute;
left: 77%;
width: 140px;
height: 70px;
border: 5px solid red;
}
.GFG3 {
position: absolute;
left: auto;
width: 350px;
height: 170px;
border: 5px solid green;
}
.GFG4 {
position: absolute;
left: initial;
width: 200px;
height: 100px;
border: 5px solid maroon;
}
.GFG5 {
position: absolute;
left: inherit;
width: 200px;
height: 100px;
border: 5px solid black;
}
</style>
</head>
<body>
<h1>The left Property</h1>
<div class="GFG1">length
<div class="GFG2">percentage</div>
<div class="GFG3">auto</div>
</div>
<div class="GFG4">initial</div>
<div class="GFG5">inherit</div>
</body>
</html>
|
Output:
Note: The containers of initial and inherit overlap because of having similar dimensions and value defaults.
Example 2: This example describes the position property to relative.
html
<!DOCTYPE html><html>
<head>
<title>
CSS left Property
</title>
<style>
body {
color: Green;
text-align: center;
}
.GFG1 {
position: relative;
left: 129px;
width: 500px;
height: 200px;
border: 5px solid orange;
}
.GFG2 {
position: relative;
left: 77%;
width: 140px;
height: 70px;
border: 5px solid red;
}
.GFG3 {
position: relative;
left: auto;
width: 350px;
height: 170px;
border: 5px solid green;
}
.GFG4 {
position: relative;
left: initial;
width: 200px;
height: 100px;
border: 5px solid maroon;
}
div.e {
position: relative;
left: inherit;
width: 200px;
height: 100px;
border: 5px solid blue;
}
</style>
</head>
<body>
<h1>The left Property</h1>
<div class="GFG1">length
<div class="GFG2">percentage</div>
<div class="GFG3">auto</div>
</div>
<div class="GFG4">initial</div>
<div class="GFG4">inherit</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by left property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 5.5 and above
- Firefox 1.0 and above
- Safari 1.0 and above
- Opera 5.0 and above