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