In this section, we will learn what the left property is and how to use it in CSS.

CSS left Property Definition and Usage

When working with the CSS position property and using values other than “static” for this property, in order to control the position of the target element, we use `bottom`, `left`, `right`, `top` properties.

In this section, we will learn what the left property is and in later sections you’ll see the other mentioned properties as well.

If the position property is set to “fixed”: the left property is used to set the left distance of the element from the left edge of the viewport.

If the position property is set to “absolute”: the left property is used to set the left distance of the target element from the left edge of its closest ancestor that is not positioned “static”.

If the position property is set to “relative”: the left property is used to set the left distance of the target element from its original position.

If the position property is set to “sticky”: The left property is used to set the left offset (on what distance from the viewport left side) the target element should become fixed.

If the position property is set to “static”: the left property has no effect.

CSS left Property Syntax

left: auto|length|initial|inherit;

CSS left Property Value

The value of this property is a number with any supported CSS units (relative or absolute).

Also, we can use percentage values as well.

Notes:

• The default value of this property is set to “auto” and that means it’s up to browsers to calculate the left distance of the target element.
• The two global values, “initial” and “inherit” could also be used for this property.

Example: left property in CSS

See the Pen left property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.