right

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

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

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

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

Синтаксис

css
/* Ключевые слова */
right: auto;

/* Значения величин */
right: 3px;
right: 2.4em;

/* Процентные значения от высоты родительского блока */
right: 10%;

/* Глобальные значения */
right: inherit;
right: initial;
right: unset;

Значения

<length>

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

  • for absolutely positioned elements, the distance to the right edge of the containing block.
  • for relatively 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:

  • for absolutely positioned elements, the position of the element is based on the left property, while width: auto is treated as a width based on the content; or if left is also auto, the element is positioned where it should horizontally be positioned if it were a static element.
  • for relatively positioned elements, the distance of the element from its normal position is based on the left property; or if left is also auto, 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 the auto 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

Примеры

css
#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;
}
html
<div id="example_3">Example 3</div>
<div id="example_4">Example 4</div>

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

Specification
CSS Positioned Layout Module Level 3
# insets
Начальное значениеauto
Применяется кпозиционированные элементы
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значенияесли указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае auto
Animation typeдлина, проценты или calc();

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
right
anchor()
Experimental
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

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