The left property in CSS is used to specify the horizontal position of a positioned element. It has no effect on non-positioned elements.
- 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.
- 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.
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.
Supported Browsers: The browser supported by left property are listed below:
- Google Chrome 1.0
- Internet Explorer 5.5
- Firefox 1.0
- Safari 1.0
- Opera 5.0
- CSS | border-left Property
- CSS | padding-left Property
- CSS | margin-left Property
- HTML | DOM Style left Property
- CSS | border-left-style Property
- CSS | border-top-left-radius Property
- CSS | border-left-color Property
- CSS | border-left-width Property
- CSS border-bottom-left-radius Property
- Number of chocolates left after k iterations
- How to distinguish left and right mouse click using jQuery?
- CSS | transition-property Property
- CSS | top Property
- CSS | all Property
- CSS | right Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.