CSS-свойство `left`

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

Попробуйте

left: 0;

left: 4em;

left: 10%;

left: 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 */
left: 3px;
left: 2.4em;
left: anchor(--my-anchor 50%);
left: calc(anchor-size(--my-anchor inline, 100px) * 2);

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

/* Keyword value */
left: auto;

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

Значения

<length>

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

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

<percentage>

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

auto

Задаёт, что:

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