W3Docs

Тема

Русский

CSS свойство left ​

Свойство left определяет горизонтальное смещение позиционированного элемента относительно его родительского блока.

Оно задаёт расстояние между левым краем поля (margin) элемента и левым краем его родительского блока. Если для position установлено значение static, свойство left не оказывает никакого эффекта.

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

  • Если position установлено в absolute или fixed, свойство left задаёт расстояние между левым краем элемента и левым краем его родительского блока.
  • Если position установлено в relative, свойство left задаёт расстояние, на которое левый край элемента смещается вправо от своей нормальной позиции.
  • Если position установлено в sticky, свойство left смещает элемент относительно его родительского блока. Элемент ведёт себя как при relative позиционировании, пока не пересечёт порог прокрутки, после чего ведёт себя как при fixed позиционировании.
  • Если position установлено в static, свойство left не оказывает никакого эффекта.
Начальное значениеauto
Применяется кПозиционированные элементы.
НаследуетсяНет.
АнимацияДа. Позиция элемента может анимироваться.
ВерсияCSS2
Синтаксис DOMObject.style.left = "50px";

Синтаксис ​

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

css
left: auto | length | initial | inherit;

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

Пример использования свойства CSS left со свойством position

html
<!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://ru.w3docs.com/build/images/w3docs-logo-black.png" alt="CSS left property" />
  </body>
</html>
Try it Yourself »

Результат ​

CSS left Property

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

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

html
<!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://ru.w3docs.com/build/images/w3docs-logo-black.png" alt="CSS left property" /> This is some div element for
      <br /> which the left side is defined
      <br /> as 200px.
    </div>
  </body>
</html>
Try it Yourself »

Пример свойства left, заданного в процентах: ​

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

html
<!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>
Try it Yourself »

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

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

html
<!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>
Try it Yourself »

Значения ​

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

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

Практика ​

Какие возможности предоставляет свойство 'left' в CSS?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.