right

right is the physical right inset of a positioned box. For relative positioning, a positive right value moves the box left. For absolute positioning, it measures the right margin edge inward from the containing block’s right padding edge.

A positive offset moves left

The blue relative box moves 16px left from its original slot. A negative value moves it right; nearby flow content stays in place.

<div class="parent"><div class="box">right: 16px</div></div>

.parent {
  padding: 1rem;
  background: #e2e8f0;
}
.box {
  position: relative;
  right: 16px;
  max-width: 12rem;
  background: #dbeafe;
  padding: 0.5rem;
}

Place a visible status at the right edge

The positioned container supplies the containing block. Padding on the main text reserves room for the status so it does not cover that text.

<section class="card">
  <h2>Lesson</h2>
  <p>Review this example.</p>
  <span class="status">Ready</span>
</section>

.card {
  position: relative;
  min-height: 5rem;
  padding: 1rem 7rem 1rem 1rem;
  background: #eff6ff;
}
.status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem;
  background: #dbeafe;
}

Values and defaults

The initial value is auto and right is not inherited. Lengths, percentages, and negative values are accepted. Percentages use the containing block’s width. Auto resolves positioning from the other constraints or static position; it is not synonymous with 0.

Static boxes ignore right. Sticky treats it as a constraint relative to the scrollport, while fixed normally uses the viewport unless an ancestor establishes a fixed containing block. Anchor-positioning functions need separate compatibility and setup checks.

Common mistakes

The original negative-relative example had its direction reversed: right:-10px moves right. When left and right both constrain a definite-width absolute box, direction determines which side wins: left for LTR, right for RTL. With auto width, the box may stretch between both sides instead.

Right remains a physical side. For a logical end edge use inset-inline-end. Learn left, position, and padding; test badges with long text and zoom.

Sources and browser support

MDN: right describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

Positioning details explain containing blocks and inset constraints.