CSS right Property

What You’ll Learn

The right property offsets a positioned element from the right edge of its container. It is one of the four offset properties alongside top, bottom, and left.

Introduction

The right property in CSS is used to position an element horizontally from the right edge of its containing block. It is commonly used in conjunction with the position property when absolute, relative, fixed, or sticky positioning is applied.

By using the right property, you can precisely control the horizontal placement of an element in a flexible and responsive manner.

Definition and Usage

Use right when you want an element anchored to the right side of a card, navbar, modal, or the viewport. Combine it with top or bottom to place corners and floating controls.

A relatively positioned parent creates the containing block for absolutely positioned children, which is the most common pattern for badges and overlays aligned from the right.

📝 Syntax

The syntax for the right property is as follows:

element {
  right: value;
}

Basic Example

.box {
  position: absolute;
  right: 20px;
}

Syntax Rules

• Requires a position value other than static.
• Length values such as px, rem, and em set a fixed gap from the right edge.
• Percentages are relative to the containing block width.
• auto lets the browser calculate placement normally.
• Pair with top, bottom, or left for full placement control.
• right: 0 aligns the element flush with the container’s right edge.

🎯 Default Value

The default value of the right property is auto, which means the element is not offset horizontally and follows the normal flow of the document.

💎 Property Values

When Does right Matter?

right is the right tool when elements should anchor from the right edge:

• Corner badges — Place labels on product cards with right: 0.
• Floating buttons — Keep action buttons visible with position: fixed and right.
• Modal close icons — Pin an × button to the top-right of a dialog.
• Responsive panels — Use percentages to maintain spacing as containers resize.

For normal document flow alignment, consider Flexbox or Grid before reaching for absolute offsets.

Examples Gallery

Start with the reference absolute box, try a fixed FAB, use percentage offsets, and anchor a corner badge.

<style>
  .container {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: lightgray;
  }

  .box {
    position: absolute;
    right: 20px;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>

<div class="container">
  <div class="box"></div>
</div>

<style>
  .fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
  }
</style>

<style>
  .label {
    position: absolute;
    right: 10%;
  }
</style>

<style>
  .card { position: relative; }
  .badge {
    position: absolute;
    right: 0;
    top: 0;
  }
</style>

right and the offset properties

right is one of four inset properties. Use it with position, top, bottom, and left to place elements precisely.

Setting both left and right on an absolutely positioned element can stretch it horizontally unless width is also defined.

.toolbar {
  position: absolute;
  right: 12px;
  top: 12px;
}

💡 Best Practices