право

<length>

Отрицательная, нулевая или положительная <length>, представляющая:

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

<percentage>

Процент от ширины содержащего блока.

auto

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

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

inherit

Указывает, что значение такое же, как вычисленное значение родительского элемента (который может не быть его содержащим блоком). Это вычисленное значение затем обрабатывается так, как если бы оно было <length>, <percentage> или ключевым словом 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  

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 имеет приоритет, если направление контейнера справа налево.

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 позиционированного макета