W3docs
ru
Войти

CSS свойство left

How to use the left CSS property to set the left position of an element in combination with the position property. See the property values in use.

Свойство 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

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="/build/images/w3docs-logo-black.png" alt="CSS left property" />
  </body>
</html>
Попробуйте сами »

Результат

CSS left Property

Пример использования свойства 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="/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>
Попробуйте сами »

Пример свойства 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' в CSS?