Свойство CSS `right`

Свойство right CSS участвует в задании горизонтального положения позиционированного элемента. Это свойство отступа от края не действует на непозиционированные элементы.

Попробуйте

right: 0;

right: 4em;

right: 10%;

right: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">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;
}

Синтаксис

/* <length> values */
right: 3px;
right: 2.4em;
right: anchor(--my-anchor 50%);
right: anchor-size(--my-anchor height, 65px);

/* <percentage>s of the width of the containing block */
right: 10%;

/* Keyword value */
right: auto;

/* Global values */
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;

Значения

<length>

Отрицательное, нулевое или положительное значение <length>:

• для абсолютно позиционированных элементов оно задаёт расстояние до правого края содержащего блока;
• для элементов с позиционированием относительно якоря функция anchor() вычисляет значение <length> относительно положения левого или правого края связанного элемента-якоря (см. Использование свойств отступа от края со значениями функции anchor()), а функция anchor-size() вычисляет значение <length> относительно ширины или высоты связанного элемента-якоря (см. Задание положения элемента на основе размера якоря).
• для относительно позиционированных элементов оно задаёт расстояние, на которое элемент смещается влево от своего обычного положения.

<percentage>

Значение <percentage> от ширины содержащего блока.

auto

Указывает, что:

• для абсолютно позиционированных элементов положение элемента определяется свойством left, а width: auto рассматривается как ширина, определяемая содержимым; или, если left также имеет значение auto, элемент позиционируется так, как если бы он был статическим;
• для относительно позиционированных элементов расстояние элемента от его обычного положения определяется свойством left; или, если left также имеет значение auto, элемент вообще не смещается по горизонтали.

Описание

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

• Если для position задано значение absolute или fixed, свойство right задаёт расстояние между внешним правым краем поля элемента и внутренней границей правого края содержащего блока. Если у позиционированного элемента есть связанный элемент-якорь, а значение свойства включает функцию anchor(), right позиционирует правый край позиционированного элемента относительно указанного <anchor-side>. Свойство right совместимо со значениями left, right, start, end, self-start, self-end, center и <percentage>.
• Если для position задано значение relative, свойство right задаёт расстояние, на которое правый край элемента смещается влево от своего обычного положения.
• Если для position задано значение sticky, свойство right используется для вычисления прямоугольника ограничения прилипания.
• Если для position задано значение static, свойство right не действует.

Если заданы и left, и right, элемент растянется так, чтобы удовлетворять обоим свойствам, если этому не препятствуют другие свойства. Если элемент не может растянуться так, чтобы удовлетворять обоим условиям — например, если задано width, — положение элемента считается переопределённым. В этом случае значение left имеет приоритет при направлении контейнера слева направо, а значение right — при направлении справа налево.

Формальное определение

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

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

Примеры

Абсолютное и относительное позиционирование с помощью right

HTML

<div id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</div>

CSS

#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

Результат

Одновременное задание left и right

Если заданы и left, и right, элемент растянется так, чтобы соответствовать обоим свойствам, если этому не препятствуют другие ограничения. Если элемент не будет растягиваться или сжиматься, чтобы соответствовать обоим свойствам, положение элемента считается заданным с избытком. Приоритет зависит от направления контейнера: left имеет приоритет, если направление контейнера — слева направо. right имеет приоритет, если направление контейнера — справа налево.

HTML

<div id="parent">
  Parent
  <div id="noWidth">No width</div>
  <div id="width">width: 100px</div>
</div>

CSS

div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/* declare both a left and a right */
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/* declare a width */
#width {
  width: 100px;
  top: 60px;
}

Результат

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

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

См. также

• top, bottom и left
• Краткое свойство inset
• inset-block-start, inset-block-end, inset-inline-start и inset-inline-end
• Краткие свойства inset-block и inset-inline
• position
• Модуль позиционированной компоновки CSS