left
Sets the left offset of a positioned element. Only works on elements with position set to relative, absolute, fixed, or sticky.
Class Patterns
Specify values using the l{N}{unit} format. For negative values, use the neg-l{N}{unit} pattern.
| Class | CSS | Description |
|---|---|---|
l0 | left: 0 | Flush to left |
l8px | left: 8px | 8px right from left |
l16px | left: 16px | 16px right from left |
l2rem | left: 2rem | 20px right from left |
l8rem | left: 8rem | 80px right from left |
l50p | left: 50% | parent width 50% right |
la | left: auto | Default (auto) |
neg-l2rem | left: -2rem | 20px outside the left boundary |
Visual Comparison
Check how elements move based on left values within a positioned parent.
Comparing left offsets of absolute elements
l0 is flush to the left; larger values move further right
Class Details
l{N}{unit}left: {value}
Sets the distance from the left reference point of a positioned element. Supports px, rem, and % units.
<!-- Dropdown menu -->
<div class="pr">
<button>Open menu</button>
<ul class="pa t100p l0 bg18181B b1pxsolid27272A br8px p16px mt4px lsn">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<!-- Full width overlay -->
<div class="pf t0 l0 w100p h100vh bg0-0-0-50 zi100 df jcc aic">
<div class="bg18181B p3-2rem br12px">Modal Content</div>
</div>
<!-- Horizontal center alignment -->
<div class="pr h10rem">
<div class="pa l50p ttxneg-50p bg6366F1 cFFFFFF py8px px16px br4px">
Center aligned
</div>
</div>laleft: auto
Resets left to its default value (auto). Useful for releasing left positioning at specific breakpoints in responsive layouts.
<!-- Responsive: Remove left on mobile -->
<div class="pa l2rem sm-la sm-pr">
absolute on desktop + left: 2rem
position reset on mobile
</div>neg-l{N}{unit}left: -{value}
Sets a negative left value. Used to move elements outside the parent's left boundary.
<!-- Decoration protruding to the left -->
<div class="pr oh bg18181B p2rem br8px">
<div class="pa neg-l2rem t2rem w4rem h4rem bg6366F1 br100p"></div>
Card Content
</div>Tips & Notes
position required
left does not work with position: static(default). Must be used with one of pr, pa, pf, or ps.
Center alignment pattern
Combining pa l50p with transform: translateX(-50%) creates horizontal center alignment. Alternatively, use pa l0 r0 with mxa.
Setting left and right simultaneously
pa l0 r0 stretches the element to the full width of the parent. Useful for overlays and full-width backgrounds.