left

Anonymous contributor's avatar
Anonymous contributor
Published Jul 14, 2021Updated Oct 17, 2024
Contribute to Docs

Specifies the distance of an element from the left of its current location if the element has position: relative declared or from the left of its nearest ancestor when the ancestor has position: relative and the element has position: absolute declared.

Syntax

left: <value>;

where <value> can be one of the following:

  • Length value: 20px
  • Percentage value: 5%
  • Keyword value: auto, inherit

Note: If none of the ancestors have position: relative declared, the absolute positioned element will traverse the DOM until it reaches the

Example 1

Set the position of .box element 40px off the left edge of the nearest relative position ancestor or from the document if none exist.

.box {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
left: 40px;
}

Example of position being absolute

Example 2

Set the position of .box element 40px from the elements left edge.

.box {
height: 100px;
width: 100px;
background-color: blue;
position: relative;
left: 40px;
}

Example of position being relative

All contributors

Contribute to Docs

Learn CSS on Codecademy