CSS |eft Property
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
Please Login to comment...