CSS свойство left

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

Свойство left используется для установления левого края элемента и его блока для абсолютно или фиксированно позиционированных элементов. Если для свойства position задано значение "static", свойство left не будет иметь эффекта.

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

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

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

Синтаксис

left: auto | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      position: absolute;
      left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства left</h2>
    <p>Установлено значение 35px.</p>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property">
  </body>
</html>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      height: 150px;
      width: 400px;
      background-color: #ccc;
      color: #666;
      padding: 10px;
      }
      img {
      position: absolute;
      left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства left</h2>
    <div>
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property">
      Это некоторый элемент div, <br>для которого левая сторона <br>определена как 150px.
    </div>
  </body>
</html>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .example {
      position: absolute;
      left: 20%;
      top: 20%;
      width: 100px;
      height: 100px;
      background-color: #ccc;
      color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства left</h2>
    <div class="example">left: 20%</div>
  </body>
</html>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .box1 {
      position: absolute;
      left: 30px;
      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</h2>
    <div class="box1">left: 30px</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	Значение элемента наследуется от родительского элемента.