CSS right Property

Example

.example {
  position: absolute;
  right: 0;
  width: 100px;
  height: 120px;
  border: 3px solid blue;
}

I am absolutely positioned.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Meaning

The right property defines the x (horizontal) coordinate for a positioned element, relative to the right side of either the containing element or browser window if directly within the <body> element.

The effect of right depends on how the element is positioned (i.e., the value of the position property):

When position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block.
When position is set to relative, the right property specifies the distance the element's right edge is moved to the left from its normal position.
When position is set to sticky, the right property is used to compute the sticky-constraint rectangle.
When position is set to static, the right property has no effect.

Default value:	auto
Inherited:	No
Animatable:	Yes
Version:	CSS2
JavaScript syntax:	`object.style.right="auto\|length\|%\|initial\|inherit\|revert\|revert-layer\|unset";`

Standard Syntax

right: auto|length|%|initial|inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Property Values

The following table describes the values of this property.

Value	Description
auto	This is default value. The browser calculates the right edge position.
length	Specifies the offset as a length value in px, pt, cm, em, etc. Negative length values are allowed.
%(percentage)	Specifies the offset in percentage. The percentage is calculated with respect to the width of the element's containing block. Negative percentage values are allowed.
initial	Sets this property to its default value.
inherit	If specified, the associated element takes the computed value of its parent element animation-delay property.
revert	Reverts the cascaded value of the property from its current value to the value the property
revert-layer	Rollback styles to the ones specified in previous cascade layers.
unset	Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  right: auto;
}

Example

.div1 {
  position: relative;
  width: 400px;
  height: 300px;
  border: 3px solid red;
}

.div2 {
  position: absolute;
  right: 0;
  width: 100px;
  height: 120px;
  border: 3px solid blue;
}

.div3 {
  position: absolute;
  right: 150px; 
  width: 200px;
  height: 120px;
  border: 3px solid green;
}

❮ Previous Reference Next ❯