CSS свойство left

Свойство left задаёт горизонтальное смещение позиционированного элемента относительно его содержащего блока. Это одно из четырёх свойств смещения — наряду с right, top и bottom — которые сдвигают элемент относительно его исходного положения.

Оно задаёт расстояние между левым краем внешнего отступа элемента и левым краем его содержащего блока. Положительное значение сдвигает элемент вправо, отрицательное — влево. Свойство left действует только на элементы, у которых position отличается от значения по умолчанию static.

Как `left` работает совместно с `position`

Точное значение left полностью определяется способом позиционирования элемента, поэтому сначала почти всегда задают position.

Если position установлен в absolute или fixed, свойство left задаёт расстояние между левым краем элемента и левым краем его содержащего блока.
Если position установлен в relative, свойство left задаёт расстояние, на которое левый край элемента смещается вправо от его нормального положения.
Если position установлен в sticky, свойство left смещает элемент относительно содержащего блока. Элемент ведёт себя как при relative-позиционировании, пока не пересечёт порог прокрутки, после чего переходит в режим fixed-позиционирования.
Если position установлен в static (значение по умолчанию), свойство left не имеет эффекта.

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

Начальное значение	auto
Применяется к	Позиционированным элементам.
Наследуется	Нет.
Анимируемое	Да. Положение элемента можно анимировать.
Версия	CSS2
DOM Syntax	Object.style.left = "50px";

Синтаксис

Синтаксис CSS свойства left

left: auto | length | initial | inherit;

Пример свойства left:

Пример CSS свойства left совместно со свойством position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <p>Here the left property is defined as 35px.</p>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" />
  </body>
</html>

Попробуйте сами »

Результат

Пример использования свойства `left`, когда изображение находится внутри элемента `<div>`:

Пример CSS свойства left с тегом img

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        height: 150px;
        width: 400px;
        background-color: #ccc;
        color: #666;
        padding: 10px;
      }
      img {
        position: absolute;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div>
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" /> This is some div element for
      <br /> which the left side is defined
      <br /> as 200px.
    </div>
  </body>
</html>

Попробуйте сами »

Пример свойства left со значением в процентах:

Пример CSS свойства left со значением в процентах

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        position: absolute;
        left: 20%;
        top: 20%;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="example">left: 20%</div>
  </body>
</html>

Попробуйте сами »

Пример свойства left со всеми возможными значениями:

Пример CSS свойства left со значениями auto, px и % (проценты)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        position: absolute;
        left: auto;
        width: 100px;
        height: 100px;
        background-color: #ccc;
      }
      .box2 {
        position: absolute;
        top: 190px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: #444;
        color: #fff;
      }
      .box3 {
        position: absolute;
        left: 10%;
        top: 50%;
        width: 100px;
        height: 100px;
        background-color: #666;
        color: #fff;
      }
      .box4 {
        position: absolute;
        left: 20%;
        top: 70%;
        width: 100px;
        height: 100px;
        background-color: #777;
        color: #fff;
      }
      .box5 {
        position: absolute;
        left: -20px;
        top: 90%;
        width: 100px;
        height: 100px;
        background-color: #999;
        text-align: right;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="box1">left: auto</div>
    <div class="box2">left: 50px</div>
    <div class="box3">left: 10%</div>
    <div class="box4">left: 20%</div>
    <div class="box5">left: -20px</div>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание	Попробуйте
auto	Браузер автоматически определяет положение левого края. Это значение по умолчанию.	Попробуйте »
length	Задаёт положение левого края в px, cm и т. д. Допускаются отрицательные значения.	Попробуйте »
%	Задаёт положение левого края в процентах от ширины содержащего блока. Допускаются отрицательные значения.	Попробуйте »
initial	Устанавливает свойство в значение по умолчанию.	Попробуйте »
inherit	Наследует значение свойства от родительского элемента.

Примечание: для позиционированных элементов left задаёт горизонтальное смещение от содержащего блока. Если указаны и left, и margin-left, приоритет при расчёте позиции имеет left.

Когда использовать `left`

Закрепление элемента интерфейса в углу. Используйте position: fixed совместно с left (и top), чтобы кнопка, значок или виджет чата оставались на месте при прокрутке страницы.
Лёгкое смещение элемента. При position: relative небольшое значение left сдвигает элемент от его естественного положения, не извлекая из потока документа, поэтому окружающий контент сохраняет своё пространство.
Наложения внутри контейнера. Дайте обёртке position: relative, а дочернему элементу — position: absolute; тогда left будет позиционировать дочерний элемент относительно этой обёртки, а не всей страницы.

Для макетов, поддерживающих несколько направлений письма, рассмотрите логическое свойство inset-inline-start: оно учитывает направление текста, автоматически соответствуя left для языков с письмом слева направо и right для языков с письмом справа налево.

Поддержка браузерами

Свойство left является частью CSS2 и работает во всех современных браузерах, включая все версии Chrome, Firefox, Safari, Edge и Opera.

Практика

Что позволяет сделать свойство 'left' в CSS?

Оно используется для позиционирования элемента от левого края содержащего элемента.Оно используется для позиционирования элемента от верхнего края содержащего элемента.Его можно использовать только с абсолютно или фиксированно позиционированными элементами.Его можно использовать со всеми типами позиционированных элементов.Оно задаёт отступ от правого края элемента.Оно задаёт отступ от левого края элемента.

Как left работает совместно с position

Синтаксис

Пример свойства left:

Результат

Пример использования свойства left, когда изображение находится внутри элемента <div>:

Пример свойства left со значением в процентах:

Пример свойства left со всеми возможными значениями:

Значения

Когда использовать left

Поддержка браузерами

Практика

Как `left` работает совместно с `position`

Пример использования свойства `left`, когда изображение находится внутри элемента `<div>`:

Когда использовать `left`