CSS right Property

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

This CSS property specifies the right offset for the horizontal positioned elements and does not affect the non-positioned elements. It is one of the four offset properties that are left, top, and bottom.

When both left and right properties are defined, the right value has a preference if the container is right-to-left, and the left value has preference if the container is left-to-right.

The effect of this property depends on how the corresponding element is positioned, i.e., the value of the position property. The right property does not affect when the position property is set to the value static.

  • If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor.
  • If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
  • If position: sticky; - the right property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
  • If position: static; - the right property has no effect.

CSS Syntax

right: auto|length|initial|inherit;

Example -