CSS right Property

Definition and Usage

The right property sets the horizontal inset of a positioned element toward or away from the physical right edge. It has no effect when position is static.

For absolute or fixed, it is the distance from the containing block’s right edge. For relative, a positive value moves the box to the left of its normal spot. The initial value is auto. It is not inherited. Prefer inset-inline-end when the offset should follow writing direction.

CSS Syntax

Examples: right: auto; · right: 20px; · right: 10%; · right: 0;

Property Values

How to Use right

Position the element first, then set how far it sits from the right.

1. Set position to relative, absolute, fixed, or sticky.
2. For absolute children, give a parent position: relative (or another non-static value) as the containing block.
3. Set right to a length, percentage, or 0.
4. Add top / left / bottom as needed, or use inset.

Live Preview

The blue box is position: absolute. Only right changes.

CSS Examples

Each snippet focuses on right. Positioning is only there so the offset can show. Use Try It Yourself for a live editor.

<style>
  .box {
    position: relative;
  }

  .pin {
    position: absolute;
    right: 20px;
    top: 16px;
  }
</style>

<div class="box">
  <div class="pin">Pinned</div>
</div>

<style>
  .nudge {
    position: relative;
    right: 24px;
  }
</style>

<p>Before</p>
<p class="nudge">Nudged left</p>
<p>After</p>

<style>
  .box {
    position: relative;
  }

  .pin {
    position: absolute;
    right: 50%;
    top: 16px;
  }
</style>

<div class="box">
  <div class="pin">50%</div>
</div>

Key Takeaways