Свойства CSS

Меню

left

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

12.0+ 5.5+ 1.0+ 1.0+ 5.0+ 1.0+

Описание

CSS свойство left указывает смещение позиционированного элемента относительно левого края. Как именно свойство left будет смещать элемент, зависит от конкретного значения свойства position:

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

Примечание: допускается использование отрицательных значений.

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

Синтаксис

left: auto|величина|inherit;

Значения свойства

Значение Описание
auto Элемент остаётся на своём месте.
величина Определяет величину смещения в единицах измерения, используемых в CSS.
% Величина смещения, указанная в процентах, обрабатывается следующим образом:
  • для элементов с фиксированным позиционированием величина смещения вычисляется в зависимости от ширины области отображения окна браузера
  • для элементов с абсолютным позиционированием величина смещения вычисляется в зависимости от ширины позиционированного элемента предка (учитывается только width + padding), если такого элемента предка нет, то величина смещения вычисляется в зависимости от ширины области отображения окна браузера
  • для элементов с относительным позиционированием величина смещения вычисляется в зависимости от ширины области содержимого родительского элемента (width)
inherit Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:
left:
Результат:
Меняйте значение, чтобы увидеть результат.
CSS Код:
div#myBox {
background-color: yellow;
width: 100px;
position: relative;
left: 0px;
}
Кликните на любое значение свойства, чтобы увидеть результат