In this section, we will learn what the right property is and how to use it in CSS.

CSS right Property Definition and Usage

When working with the CSS position property and using values other than “static” for this property, in order to control the position of the target element, we use `bottom`, `left`, `right`, `top` properties.

In this section, we will learn what the right property is and in later sections you’ll see the other mentioned properties as well.

If the position property is set to “fixed”: the right property is used to set the right distance of the element from the right edge of the viewport.

If the position property is set to “absolute”: the right property is used to set the right distance of the target element from the right edge of its closest ancestor that is not positioned “static”.

If the position property is set to “relative”: the right property is used to set the right distance of the target element from its original position.

If the position property is set to “sticky”: The right property is used to set the right offset (on what distance from the viewport right side) the target element should become fixed.

If the position property is set to “static”: the right property has no effect.

CSS right Property Syntax

right: auto|length|initial|inherit;

CSS right Property Value

The value of this property is a number with any supported CSS units (relative or absolute).

Also, we can use percentage values as well.

Notes:

• The default value of this property is set to “auto” and that means it’s up to browsers to calculate the right distance of the target element.
• The two global values, “initial” and “inherit” could also be used for this property.

Example: right in CSS

See the Pen right in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.