CSS left Property

Definition and Usage

The left property sets the horizontal inset of a positioned element toward or away from the physical left edge. It has no effect when position is static.

For absolute or fixed, it is the distance from the containing block’s left edge. For relative, it moves the box to the right of its normal spot. The initial value is auto. It is not inherited. Prefer inset-inline-start when the offset should follow writing direction.

CSS Syntax

Examples: left: auto; · left: 20px; · left: 10%; · left: 0;

Property Values

How to Use left

Position the element first, then set how far it sits from the left.

1. Set position to relative, absolute, fixed, or sticky.
2. For absolute children, give a parent position: relative (or another non-static value) as the containing block.
3. Set left to a length, percentage, or 0.
4. Add top / right / bottom as needed, or use inset.

Live Preview

The blue box is position: absolute. Only left changes.

CSS Examples

Each snippet focuses on left. Positioning is only there so the offset can show. Use Try It Yourself for a live editor.

<style>
  .box {
    position: relative;
  }

  .pin {
    position: absolute;
    left: 20px;
    top: 16px;
  }
</style>

<div class="box">
  <div class="pin">Pinned</div>
</div>

<style>
  .nudge {
    position: relative;
    left: 24px;
  }
</style>

<p>Before</p>
<p class="nudge">Nudged right</p>
<p>After</p>

<style>
  .box {
    position: relative;
  }

  .pin {
    position: absolute;
    left: 50%;
    top: 16px;
  }
</style>

<div class="box">
  <div class="pin">50%</div>
</div>

Key Takeaways