CSS Reference Property

right

The right property is an offset property that is used to specify the right offset of a positioned element with respect to its positioning context.

It is one of four available offset properties that also include left, top, and bottom.

Offset properties are used to specify the exact position of a positioned element and have no effect on non-positioned (static) elements. In order to use this property, the element should have a position value other than the default static.

The right property specifies how far an absolutely positioned element’s right margin edge is offset relative to the right edge of the element’s positioning context, which is usually its containing block. For relatively positioned elements, the offset is with respect to the right edge of the element itself (i.e., the element is given a position in the normal flow, then offset from that position according to the offset properties). For fixed and sticky elements the positioning context is the viewport.

You should read the position property entry for details on how to choose a position for an element to use the offset properties on it.

If an element has a specified width, then the right property will be overridden by the left property if the left property is set to any value other than auto. If the element does not have a specified width and the left property is set along with the right property, the element will stretch so that its left and right edges are positioned according to the left and right offsets.

Official Syntax

Syntax:
```
right: <length> | <<percentage> | auto
```
Initial: auto
Applies To: positioned elements
Animatable: yes, as a length, percentage or calc();

Values

<length>

The right offset is specified as a fixed length. See the <length> entry for a list of possible length values and units.

Negative values are allowed. A positive value will offset the element to the left from the right edge of its positioning context, while a negative value will offset to the right with respect to the right edge of the context.

<percentage>

The right offset is specified as a percentage of its containing block's height. See the <length> entry for a list of possible length values and units.

auto

When right is set to auto then:

If the element is relatively positioned, it will be positioned (horizontally) according to the value of the left property, and if the left property is also set to auto, the element is not offset horizontally at all. (It could still be offset vertically using one of the vertical offset properties top and bottom.)
If the element is absolutely positioned, it will be positioned (horizontally) according to the value of the left property, and if its width is width: auto, it will get its width based on its content—it usually expands to fill the entire available width inside its containing block.

Notes

The right offset property also accepts a value of inherit, which allows the element to inherit its right offset from its parent. The element's parent may not be its positioning context.

Examples

The following example offsets an absolutely positioned element by 30px the the left of the right edge of its containing block (which in this case is its positioning context).

.container {
    position: relative; /* establishes a positioning context for its absolutely positioned descendants and for itself */
}

.absolutely-positioned {
    position: absolute;
    right: 30px;
}

Live Demo

View this demo on the Codrops Playground

Browser Support

The right property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.