слева

<length>

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

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

<percentage>

Процент от ширины контейнера.

auto

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

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

inherit

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

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

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

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

left = 
  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="wrap">
  <div id="example_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>
      The only containing element for this div is the main window, so it
      positions itself in relation to it.
    </p>
  </div>

  <div id="example_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>

    <div id="example_5">
      <pre>
        position: absolute;
        right: 0;
        left: 0;
        top: 200px;
      </pre>
      <p>Absolute position with both left and right declared</p>
    </div>
  </div>
</div>

CSS

#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

#example_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #d8f5ff;
}

#example_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #c1ffdb;
}
#example_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #ffd7c2;
}

#example_4 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  background-color: #ffc7e4;
}
#example_5 {
  position: absolute;
  right: 0;
  left: 0;
  top: 100px;
  background-color: #d7ffc2;
}

Результат

• top, bottom и right
• inset сокращение
• inset-block-start, inset-block-end, inset-inline-start и inset-inline-end
• inset-block и inset-inline сокращения
• position
• CSS позиционирование модуль