Right Property
Last updated: 2026-09-13
right Right Property
The right property defines the offset of a positioned element from the right edge of its containing block, measured leftward. It only applies to non-static positioned elements and is typically used with absolute or fixed positioning to align elements to the right.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
right: auto | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | No offset. |
<length> | <percentage> | Type | An offset from the containing block's right edge. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| right | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： right 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 to fill the space between them.
❓ FAQ
QWhat happens when both left and right are set?
AFor absolute or fixed elements without a width, the element stretches to fill the space between left and right, creating an adaptive width layout; for example, .bar { position:absolute; left:0; right:0; } spans the full horizontal space. If a width is set, left wins and right is ignored in LTR text. This is a handy pattern for overlays and full-width bars.
QWhich has higher priority: right or left?
AIt depends on the writing mode. In LTR, left-to-right text such as English and Chinese, left takes priority and right is ignored when both are set; in RTL, right-to-left text such as Arabic, right takes priority. Additionally, if no width is set, both act together to stretch the element. This rule lets layouts follow the writing direction, but it is direction-sensitive behavior to be aware of.
QWhy isn't right working?
ACommon reasons: first, the element's position is static, since right only affects positioned elements; second, both a width and a left are set, and left wins in LTR, making right ineffective; third, misunderstanding the reference, since absolute positions against the nearest positioned ancestor's right edge while fixed positions against the viewport's right edge. Check position and conflicting properties first, and confirm the direction of the offset.
QHow do I pin an element to the right side of a container?
AGive the parent position:relative and the child position:absolute; right:0, optionally with top or bottom for the vertical position, and the child then hugs the parent's right edge. To pin it to the right of the viewport instead, use position:fixed; right:20px; top:20px directly, which is common for back-to-top buttons and floating chat widgets. Add a z-index when several floating layers overlap.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
left (Left Offset)
The property that offsets from the left edge.
position Property
Learn the prerequisites for right to take effect.
