CSS right Property

CSS right property specifies the horizontal position of a positioned element in the layout. It basically specifies the position of the right edge of an element.

The right property has no effect on non-positioned elements. An element is called non-positioned if its status is static. That is, the right property will not affect elements having position: static;.

The effect of the right property varies with the position property i.e.

  • If the position of the element is relative, the element adjusts itself relative to its original(default) position.

In the example below, the <div> element moves 50px left from its original(default) position, as we have specified right: 50px;. In simple words, the right edge of the <div> element will be 50px away from its original position. Try it out:

Example:

div{
  position: relative;
  right: 50px;
}

  • If the position of the element is absolute, the element adjusts itself relative to the nearest positioned ancestor. If the element has no positioned ancestor, it adjusts itself relative to the viewport.

In the example below, the <div> element moves 10px away from the right edge of the viewport, as it has no positioned ancestor and we have used right: 10px;. In simple words, the right edge of the <div> element will be 10px away from the right edge of the viewport. Try it out:

Example:

div{
  position: absolute;
  right: 10px;
}

The right property can also accept a negative value. In this case, the content of the element starts flowing out the viewport, and a horizontal scroll bar is added to the webpage. Refer to the example below:

Example:

div{
  position: absolute;
  right: -60px;
}

CSS Syntax

The right property has the below syntax:

right: auto|length|%|initial|inherit;

Property Values

The right property accepts the following values:

autoThe browser itself calculates the right position of the element. This is the default value.
lengthSpecifies the right position of the element in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. Negative values are also allowed.
%Specifies the right position of the element in percentage(%). The percentage value is calculated from the parent element’s total height. Negative values are also allowed.
initialSets the right property to its default value(auto).
inheritInherits the right property from the parent element.

general Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.right = “10px”;