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 Значение элемента наследуется от родительского элемента.

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

1.0+ 12.0+ 1.0+ 1.0+ 5.0+


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

Похожие статьи