css властивість left


Властивість left визначає відстань відступу від лівого краю батьківського елемента до лівого краю дочірнього елемента.

Властивість `left`

Поведінка цієї властивості залежить від значення властивості position:

  • position:absolute - батьківським елементом виступає вікно браузера і положення елемента визначається від його лівого краю.
  • position:relative - відстань розраховується від лівого краю початкового положення елемента.
  • Якщо у батьківського елемента вказано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від лівого краю батькаівського елемента.
  • position:static - властивість left не працює.

Якщо для елементу зазначено відразу left і right, його позиція перевизначається. Якщо це так, властивість left має перевагу над right, коли контейнер розташований ліворуч направо, і навпаки: right має перевагу над left, якщо контейнер розташований праворуч наліво.

Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості left може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елементу.

Нотатка:

Значення властивості left може бути і від'ємним, в цьому випадку можливі накладення різних елементів один на одного.

Нотатка:

Якщо елемент з position:absolute не має батьків, він буде використовувати в якості батька вікно браузера, і рухатися разом зі сторінкою при її прокрутці.

Синтаксис

left: auto|length|initial|inherit|%;

Властивість left може отримувати 5 значень:

auto

Браузер самостійно розрахує велечину відступа. Без задання.

length

В якості значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення можуть бути від'ємними. Якщо значення у відсотках, положення елемента розраховується залежно від ширини батьківського елементу.

initial

Встановлює властивість у значення без задання.

inherit

Вказує на спадковість властивості від свого батьківського елемента.

%

Встановлює відстань відступу в %. Від'ємні значення дозволяються.

Значення без задання: auto
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.left="100px"

Переглядачі

Переглядач
left

1.0

5.5

1.0

1.0

5.0

Переглядач
left

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Приклад використання властивості

Приклад використання властивості

Контейнер буде зміжений від лівої сторони на 80 пікселів.

div.absolute {


    position: absolute;


    left: 80px;


    width: 200px;


    height: 120px;


    border: 3px solid #8AC007;


}

Додаткові посилання