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 може бути і від'ємним, в цьому випадку можливі накладення різних елементів один на одного.

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

auto

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

автор: Svitlana

правити

length

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

%

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
left	1.0	1.0	1.0	5.0	5.5

Підтримка: мобільні переглядачі

Переглядач
left	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="area">
    <div class="absolute">left: 80px</div>
</div>

.area {
    position: relative;
    height: 160px;
    background: #eee;
}

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