Left Property
Last updated: 2026-09-13
left Left Property
The left property defines the offset of a positioned element from the left edge of its containing block, measured rightward. It only applies to non-static positioned elements and is among the most commonly used offset properties, typically paired with absolute or fixed positioning for precise left-side placement.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
left: auto | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | No offset. |
<length> | <percentage> | Type | An offset from the containing block's left edge. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| left | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： left only affects non-static positioned elements; it has no effect on position:static.
Tip： A percentage is computed against the containing block's width. Setting both left and right stretches the element's width for adaptive layouts.
❓ FAQ
QWhat happens when both left and right are set?
AFor absolute or fixed elements without a width, the element stretches from left to right, filling the horizontal space adaptively; for example, .overlay { position:absolute; left:0; right:0; } spans the full width. If a width is set, left wins and right is ignored in LTR text. This is a go-to pattern for full-width bars and overlay layers, letting the element resize with the viewport automatically.
QWhat is the left percentage relative to?
AThe percentage is computed against the containing block's width. For absolute elements the containing block is the padding box of the nearest positioned ancestor; for fixed it is the viewport; for relative it is the element's own original position. For example, left:50% places the element's left edge at half the containing block's width, often combined with transform:translateX(-50%) for horizontal centering.
QHow do I center horizontally with left:50%?
ASet the element to position:absolute, with the parent position:relative, use left:50% so its left edge lands at the container's midpoint, then apply transform:translateX(-50%) to shift it left by half its own width; that is the classic horizontal-centering trick. A cleaner modern alternative is the flex parent with display:flex; justify-content:center, which avoids the magic numbers entirely. The same translateX trick works with right:50% for centering from the right edge.
QWhy isn't left working?
AThe most common reason is that position is still static, since left only works on positioned elements. Next, if both width and right are set, left wins over right in LTR text; if you expected right to apply, remove left or width. Finally, confirm the value is valid, that is, auto, length, or percentage. Check the position and conflicting properties step by step.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
right (Right Offset)
The property that offsets from the right edge.
position Property
Learn the prerequisites for left to take effect.
