css властивість left
Властивість left визначає відстань відступу від лівого краю батьківського елемента до лівого краю дочірнього елемента.
Поведінка цієї властивості залежить від значення властивості position:
position:absolute- батьківським елементом виступає вікно браузера і положення елемента визначається від його лівого краю.position:relative- відстань розраховується від лівого краю початкового положення елемента.- Якщо у батьківського елемента вказано
position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від лівого краю батькаівського елемента. position:static- властивість left не працює.
Якщо для елементу зазначено відразу left і right, його позиція перевизначається. Якщо це так, властивість left має перевагу над right, коли контейнер розташований ліворуч направо, і навпаки: right має перевагу над left, якщо контейнер розташований праворуч наліво.
Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості left може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елементу.
| Нотатка: | Значення властивості |
| Нотатка: | Якщо елемент з |
Синтаксис
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;
}