CSS свойствоright частично определяет горизонтальное положение позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е.right не применится, если заданоposition: static).

Интерактивный пример

right: 0;

right: 4em;

right: 10%;

right: 20px;

<section>  <div>    <div>I am absolutely positioned.</div>    <p>      As much mud in the streets as if the waters had but newly retired from the      face of the earth, and it would not be wonderful to meet a Megalosaurus,      forty feet long or so, waddling like an elephantine lizard up Holborn      Hill.    </p>  </div></section>

.example-container {  border: 0.75em solid;  padding: 0.75em;  text-align: left;  position: relative;  width: 100%;  min-height: 200px;}#example-element {  background-color: #264653;  border: 4px solid #ffb500;  color: white;  position: absolute;  width: 140px;  height: 60px;}

Эффект свойстваright зависит от того, как позиционируется элемент (то есть от значения свойстваposition):

• Когда заданоposition: absolute илиfixed — свойствоright устанавливает расстояние между правым краем элемента и правым краем содержащего его блока.
• Когда заданоposition: relative — свойствоright устанавливает расстояние, на которое правый край элемента перемещается влево от его обычной позиции.
• Когда заданоposition: sticky — свойствоright работает так, как приposition: relative во время нахождения элемента внутри области просмотра, и какposition: fixed вне области просмотра.
• Когда заданоposition: static — свойствоrightне имеет никакого эффекта.

Когда заданы оба свойстваleft иright, и элемент не может растянуться, чтобы им соответствовать, то позиционированние элемента isoverspecified. В этом случае значениеleft имеет приоритет, when the container is left-to-right; и наоборот, значениеright имеет приоритет, when the container is right-to-left.

Синтаксис

/* Ключевые слова */right: auto;/* Значения величин */right: 3px;right: 2.4em;/* Процентные значения от высоты родительского блока */right: 10%;/* Глобальные значения */right: inherit;right: initial;right: unset;

Значения

<length>

Отрицательная, нулевая или положительная величина, которая представляет:

• forabsolutely positioned elements, the distance to the right edge of the containing block.
• forrelatively positioned elements, the distance that the element is moved to the left of its normal position.

<percentage>

A<percentage> of the containing block's width.

auto

Specifies that:

• forabsolutely positioned elements, the position of the element is based on theleft property, whilewidth: auto is treated as a width based on the content; or ifleft is alsoauto, the element is positioned where it should horizontally be positioned if it were a static element.
• forrelatively positioned elements, the distance of the element from its normal position is based on theleft property; or ifleft is alsoauto, the element is not moved horizontally at all.

inherit

Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a<length>,<percentage>, or theauto keyword.

Формальный синтаксис

right =
auto|
<length-percentage>|
<anchor()>|
<anchor-size()>

<length-percentage> =
<length>|
<percentage>

<anchor()> =
anchor(<anchor-name>?&&
<anchor-side> ,<length-percentage>?)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<anchor-name> =
<dashed-ident>

<anchor-side> =
inside|
outside|
top|
left|
right|
bottom|
start|
end|
self-start|
self-end|
<percentage>|
center

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

Примеры

#example_3 {  width: 100px;  height: 100px;  background-color: #ffc7e4;  position: relative;  top: 20px;  left: 20px;}#example_4 {  width: 100px;  height: 100px;  background-color: #ffd7c2;  position: absolute;  bottom: 10px;  right: 20px;}

<div>Example 3</div><div>Example 4</div>

Спецификации

Совместимость с браузерами

Смотрите также

• position,left,top,bottom