CSS свойство left

Для HTML элементов с абсолютным позиционированием свойство left определяет расстояние от левого края элемента до левого края его ближайшего родительского элемента, т.е. расстояние его смещения вправо. Если у HTML элемента с абсолютным позиционированием нет позиционирующего родителя, то используется элемент body документа, и такой HTML элемент будет прокручиваться вместе со страницей.

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

Внимание: Если свойство position имеет значение static, то свойство left не будет иметь эффекта.

CSS синтаксис

left: auto | расстояние | initial | inherit;

Возможные значения

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

Пример использования

Устанавливаем левый край элемента <div> с абсолютным позиционированием на расстояние в 80px вправо от левого края его ближайщего родителя.


div.absolute {
    position: absolute;
    left: 80px;
    width: 200px;
    height: 120px;
    border: 3px solid #8AC007;
}