right

Example

Set the right edge of the positioned <div> element 150px to the left of the right edge of its nearest positioned ancestor:

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

Try it Yourself »

Definition right

Подработка: Перевод страницы

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

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.

Show demo ❯

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS2
JavaScript syntax:	object.style.right="200px" Try it

Browser Support right

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

Property
right	1.0	5.5	1.0	1.0	5.0

CSS Syntax right

right: auto|length|initial|inherit;

Property Values right

Value	Description	Demo
auto	Lets the browser calculate the right edge position. This is default	Demo ❯
length	Sets the right edge position in px, cm, etc. Negative values are allowed. Read about length units	Demo ❯
%	Sets the right edge position in % of containing element. Negative values are allowed	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples right

Example

Use the right property with a negative value and for an element with no positioned ancestors:

div.b {
position: absolute;
right: -20px;
  width: 100px;
  height: 120px;
border: 3px solid blue;
}

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

Try it Yourself »