CSS left Property

What You’ll Learn

The left property controls how far an element sits from the left edge of its containing block. It is one of the core CSS positioning tools used with position: absolute, relative, fixed, and sticky.

Definition and Usage

The left CSS property sets the horizontal offset of a positioned element. It defines the distance between the left edge of the element’s margin box and the left edge of its containing block.

This property moves an element to the right when you use a positive value, or further left when you use a negative value. It is commonly used with position values such as absolute, relative, fixed, and sticky.

📝 Syntax

The syntax for the left property is straightforward:

selector {
  left: value;
}

Basic Example

.box {
  position: absolute;
  left: 50px;
}

Syntax Rules

• The value can be a length, a percentage, or the keyword auto.
• Positive values push the element away from the left edge.
• Negative values can move the element partially outside the container.
• The property is not inherited.
• It only applies when position is not static.

💎 Property Values

The default value of left is auto. That means the browser calculates placement based on normal layout rules and other positioning properties.

Requires Positioned Elements

left controls horizontal offset from the containing block’s left edge. It works with these position values:

• position: absolute — offsets relative to the nearest positioned ancestor.
• position: fixed — offsets relative to the viewport.
• position: sticky — offsets apply when the element becomes stuck.
• position: relative — shifts the element from where it would normally appear.

Examples Gallery

Position a box with pixel and percentage values, nudge a relatively positioned element, and pin fixed UI to the viewport.

<style>
  .container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
  }
  .box {
    position: absolute;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: #4caf50;
  }
</style>

<div class="container">
  <div class="box"></div>
</div>

.marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.callout {
  position: relative;
  left: 20px;
}

.sidebar {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: 10rem;
}

♿ Accessibility

• Do not hide essential content — Fixed or absolutely positioned elements can cover links and buttons.
• Support zoom and small screens — Test left values on narrow viewports.
• Keep logical tab order — Visual offset with left does not change DOM reading order.
• Prefer logical properties for RTL — Use inset-inline-start when building multilingual layouts.
• Avoid horizontal-only layouts — Ensure content remains reachable without sideways scrolling.

💡 Best Practices