Смещение элемента от левого края: left

left

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 5.5 5.0 1.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 1.0 1.0 6.0 6.0 1.0
Свойство
left — это свойство позволяет определить смещение элемента от левого края
Описание
Это свойство работает в совокупности со свойством position. Значение свойства position определяет откуда будет происходить смещение, если указано значение relative, то смещение будет происходить от левого края элемента; если стоит значение absolute, то нужно смотреть на "предков" позиционируемого элемента, если они позиционированы как relative, absolute или fixed, то смещение будет относительно этих элементов, если же нет позиционированных предков, то смещение будет происходить относительно окна браузера; если стоит значение fixed, то смещение будет от левого края окна браузера
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
К тем элементам которые имеют значения absolute, relative или fixed свойства position
Может принимать значения
значение в абсолютных единицах | значение в относительных единицах | auto | inherit
Значение по умолчанию
auto
Правила записи
свойство: значение;
Примеры

В этом абзаце position: absolute; left: auto; смещение будет рассчитано автоматически


В данном примере при значении absolute свойства position и при значении auto свойства left элемент удаляется со своего места, пространство которое он занимал не сохраняется, происходит наложение элемента на текст

В этом абзаце position: relative; left: 1em будет смещение от левого края элемента на величину 1em


Нужно обратить внимание что при значении relative свойства position место которое занимал элемент сохраняется

В этом абзаце position: absolute; left: 5%; будет смещение от левого края области просмотра на величину 5%


Нужно обратить внимание что при значении absolute свойства position место которое занимал элемент не сохраняется и в данном случае он позиционируется относительно левого края области просмотра

В этом абзаце position:fixed; left: 50px; top: 200px; будет смещение от левого края окна браузера на величину 50px и от верхнего края окна браузера на величину 200px


Нужно обратить внимание что при значении fixed свойства position место которое занимал элемент не сохраняется, он позиционируется относительно окна браузера и остается в этой позиции при прокрутке страницы

Это значит что свойство унаследует значение от родителя

Поделиться