CSS left Property

Description

The left property determines the distance from the left edge of the parent element, not including the indent, margin, and border width, to the left edge of the child element. The coordinate count depends on the value of the position property. If it is absolute, the browser window acts as the parent and the position of the element is determined from its left edge.

Initial value
auto
Applies to
Positioned elements
Inherited
No
Computed value
If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'
Animatable
Yes
JavaScript syntax
object.style.left

Interactive Demo

I am absolutely positioned.
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

left: auto | <length> | <percentage>

Values

  • <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
  • <percentage>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
  • autoDefault position, according to the regular HTML layout of the page.

Example

<div class="layer1"> <div class="layer2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div>
.layer1 { 
   position: absolute;
   left: 20px;
   background: #fc3;
   margin: 7px; 
} 
.layer2 { 
   position: relative; 
   left: -12px;
   top: 13px; 
   border: 1px solid black;
   padding: 5px;
   margin: 7px;
}

Browser Support

The following table will show you the current browser support for the CSS left property.

Desktop
Edge Chrome Firefox Opera Safari
121151
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18414114.4

Last updated by CSSPortal on: 1st January 2024