CSS left Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The left property controls the horizontal offset of an element when that element participates in CSS positioning. It shifts the element’s box along the inline (left–right) axis relative to the reference established by its positioning context, so it only has an effect when the element is not using the default static positioning—see position. Conceptually, think of left as telling the browser where, horizontally, to place the positioned box within its containing block or relative to its normal position.

How left affects layout depends on the positioning scheme in use. For example, with relative positioning the element is visually offset but its original space in the flow is preserved; with absolute or fixed positioning the element is taken out of the normal flow and placed with respect to its containing block or the viewport. The property has a direct vertical counterpart, top, which performs the analogous role along the block (vertical) axis.

Practical considerations include how left interacts with other layout features and how it is used in responsive and animated designs. There is a shorthand that can set multiple inset sides at once—see inset—and transforms and compositing affect how movement is rendered; using transform (for example for animations) is often more performant than animating positional offsets. Finally, remember that the effect of left depends on the element’s positioning context and stacking/containment rules, so its visual outcome is best understood in the context of the surrounding positioned ancestors.

Definition

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

left: 0;

left: 30px;

left: 20%;

left: 5em;

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

HTML

<h1>CSS left property  -  Example</h1>

<div class="stage">

    <div class="box box1">Left: 20px</div>

    <div class="box box2">Left: 50% (centered)</div>

    <div class="box box3">Left: -10px</div>

</div>

CSS

/* Page and container */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    padding: 20px;
    background: #f7f8fa;
    color: #222;
}

.stage {
    position: relative; /* establishes positioning context for absolutely positioned children */
    width: 480px;
    height: 200px;
    margin-top: 16px;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Positioned boxes demonstrating the left property */
.box {
    position: absolute; /* left only affects positioned elements (absolute/relative/fixed/sticky) */
    padding: 10px 14px;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.box1 {
    left: 20px; /* moves 20px from the left edge of .stage */
    top: 20px;
    background: #2b6cb0;
}

.box2 {
    left: 50%; /* positioned at 50% of the .stage width */
    top: 80px;
    transform: translateX(-50%); /* centers the element horizontally */
    background: #38a169;
}

.box3 {
    left: -10px; /* negative value moves the element outside the left boundary */
    top: 140px;
    background: #d53f8c;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS left property. Hover over a browser icon to see the version that first introduced support for this CSS property.