CSS right Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The right property controls an element's horizontal offset when that element is participating in CSS positioning. It determines how the element should be offset from the right edge of its containing block, but it does nothing for elements that remain in the normal (static) flow; to take effect it must be used on an element whose positioning is enabled via the position property. Conceptually, right is one side of the pair of horizontal offset controls and is used whenever you need to anchor or nudge an element relative to the right boundary of its reference box.

How the offset created by right is applied depends on the element’s positioning mode. For example, when an element is positioned relatively it is visually shifted while its original document slot is preserved; when it is positioned absolutely or fixed the element is removed from normal flow and located with respect to the appropriate containing block (often the nearest positioned ancestor or the viewport). The final placement also depends on the other offset properties (such as left) or shorthands like inset, which together determine how the box edges relate to the reference box.

In practical layout work, right interacts with other layout mechanisms and context-forming features. Transforms, stacking contexts and certain layout conditions can change which box acts as the reference or can alter coordinate systems, so a transformed ancestor or other layout effects may change how right resolves; see transform for details on one common source of such changes. Because right operates in the positioning layer, it’s commonly used for overlays, tooltips, fixed UI controls, and precise alignment of absolutely-positioned elements, and it should be considered alongside document direction and any logical offset shorthands when aiming for internationalized layouts.

Definition

Initial value: auto
Applies to: Positioned elements
Inherited: No
Computed value: If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.
Animatable: Yes
JavaScript syntax: object.style.right

Interactive Demo

right: 0;

right: 30px;

right: 20%;

right: 5em;

I am absolutely positioned.

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

right: auto | <length> | <percentage>

Values

<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
<percentage>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
autoDefault position, according to the regular HTML layout of the page.

Example

HTML

<div class="container">

    <div class="box">Positioned box (right: 20px)</div>

    <p class="content">This container uses position: relative so the child can be positioned from the right.</p>

</div>

CSS

.container {
    position: relative;
    width: 600px;
    height: 200px;
    margin: 40px auto;
    padding: 16px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #f0f4ff, #e6f7ff);
    border-radius: 8px;
    border: 1px solid #dbe9ff;
}

.box {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 180px;
    padding: 12px 16px;
    background-color: #1e90ff;
    color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(30, 144, 255, 0.16);
    font-weight: 600;
    text-align: center;
}

.content {
    margin-top: 90px;
    color: #12406a;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS right property. Hover over a browser icon to see the version that first introduced support for this CSS property.