right
Sets the right offset of a positioned element. Only works on elements with position set to relative, absolute, fixed, or sticky.
Class Patterns
Specify values with r{N}{unit} format. Use neg-r{N}{unit} for negative values.
| Class | CSS | Description |
|---|---|---|
r0 | right: 0 | Flush right |
r8px | right: 8px | 8px inward from right |
r16px | right: 16px | 16px inward from right |
r2rem | right: 2rem | 20px inward from right |
r5rem | right: 5rem | 50px inward from right |
r50p | right: 50% | 50% of parent width inward |
ra | right: auto | Default (auto) |
neg-r2rem | right: -2rem | 20px beyond the right edge |
Visual Comparison
See how an element moves based on the right value within a positioned parent.
Right offset comparison of absolute elements
r0 sticks to the right edge; larger values move it leftward
Class Details
r{N}{unit}right: {value}
Sets the distance from the right reference point of a positioned element. Supports px, rem, and % units.
<!-- Top-right close button -->
<div class="pr bg18181B p2rem br8px">
<button class="pa t8px r8px bg27272A cFFFFFF w3-2rem h3-2rem br100p bn cp df jcc aic">X</button>
<p class="cFAFAFA">Modal Content</p>
</div>
<!-- Right-side fixed notification -->
<div class="pf t2rem r2rem bg6366F1 cFFFFFF p16px br8px zi50">
Notification Message
</div>
<!-- Badge on parent right side -->
<div class="pr dib">
<img class="w4rem h4rem br100p" />
<span class="pa t0 r0 bg34D399 c000000 fs12px py2px px6px br4px">Online</span>
</div>raright: auto
Resets right to the default value (auto). Useful for releasing right positioning at specific breakpoints in responsive design.
<!-- Responsive: release right on mobile -->
<div class="pa r2rem sm-ra sm-pr">
absolute on desktop + right: 2rem
position reset on mobile
</div>neg-r{N}{unit}right: -{value}
Sets a negative right value. Used to move an element outside the parent's right edge.
<!-- Element protruding outside to the right -->
<div class="pr oh bg18181B p2rem br8px">
<div class="pa t2rem neg-r2rem bg6366F1 cFFFFFF py8px px16px br4px fs14px">
Protruding outside to the right
</div>
Card Content
</div>Tips & Notes
position required
right does not work with position: static (default). Always use with pr, pa, pf, or ps.
right vs left specificity
Setting both left and right simultaneously gives left priority in LTR environments. Setting both can also stretch the element width.
Close button pattern
pa t8px r8px is a commonly used pattern for close buttons in the top-right corner of modals and cards.