CSS left

The left property specifies the horizontal position of a positioned element.

Positioned elements have a position, such as absolute, sticky, etc.

The effect of the left setting depends on the position value.



The inner element is positioned 50px from the left side of the container.

  .relative {
    position: relative;
    width: 400px;
    height: 200px;
    background-color: paleturquoise;

  .absolute {
    position: absolute;
    top: 20px;
    left: 50px;
    width: 200px;
    height: 90px;
    background-color: teal;

<div class="relative">
  <div class="absolute">

Using left

The effect of the left setting depends on the position value:

  • fixed or absolute - the left position is measured from its containing element.
  • relative - the left is measured from its normal left position.
  • sticky - the left specifies the sticky left position relative to the viewport.
  • static - the left value has no effect.

The left property has no effect on non-positioned elements.


left: auto | length | initial | inherit;



Value Description
auto Default. The browser calculates the left position.
length Sets the left position with any valid CSS length value. Negative values are allowed.
% Sets the left position in % of the containing element. Negative values are allowed
initial Sets the value to its default value.
inherit Inherits the value from its parent.

More Examples

Click the buttons to see the different left values.

  .left-relative {
    position: relative;
    width: 350px;
    height: 200px;
    background-color: firebrick;

  .left-absolute {
    position: absolute;
    top: 20px;
    left: -20px;
    width: 250px;
    height: 90px;
    background-color: orangered;
    transition: left 1s ease .2s;

<div class="left-relative">
  <div class="left-absolute"></div>

Browser support

This table shows when left support started for each browser.

1.0 Dec 2008
1.0 Nov 2004
5.5 Jul 2000
5.0 Dec 2000
1.0 Jun 2003

You may also like

Last updated on Sep 30, 2023