left

left is a physical inset for positioned boxes. A positive relative left offset moves a box right; an absolute left offset measures from the containing block’s left padding edge to the box’s left margin edge.

Move right, keep the original slot

This relative box moves 20px right. Change the value to -20px to move left. Its original flow space stays reserved.

<div class="parent"><div class="box">left: 20px</div></div>

.parent {
  background: #e2e8f0;
  padding: 1rem;
}
.box {
  position: relative;
  left: 20px;
  max-width: 10rem;
  padding: 0.5rem;
  background: #dbeafe;
}

Place a marker inside a known container

The parent is positioned, so the absolute marker’s left offset uses that parent rather than an unrelated viewport.

<div class="parent"><div class="marker">10% from the left</div></div>

.parent {
  position: relative;
  height: 120px;
  background: #eff6ff;
}
.marker {
  position: absolute;
  top: 1rem;
  left: 10%;
  width: 8rem;
  padding: 0.5rem;
  background: #dbeafe;
}

Values and positioning context

The initial value is auto and left is not inherited. Lengths, negative values, and percentages are useful; percentages use the containing block’s width. Auto means placement is resolved from other constraints or the static position, not necessarily zero.

Static positioning ignores left. Fixed normally uses the viewport, unless an ancestor establishes its fixed containing block. Sticky uses left as a sticky constraint; it also needs an appropriate scrollport and space to move. Anchor and anchor-size functions require an anchor setup and value-specific compatibility checks.

Conflicting sides

A non-replaced absolute box with auto width can stretch between left and right. If a declared width overconstrains both sides, left wins in an LTR container and right in RTL. Relative boxes resolve conflicting horizontal offsets by direction too.

Left remains physical in RTL and vertical writing. Use logical inset-inline-start for a writing-mode-aware beginning. Learn right, inset, and position.

Sources and browser support

MDN: left describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

Positioning details explain containing blocks and inset constraints.