Позиціонування за допомогою CSS веб-елементів: left
Елемент left визначає відстань від лівого краю батьківського елемента до лівого краю дочірнього елемента. Його значення залежить від властивості position. Якщо ця властивість встановлена на absolute, то позицію елемента визначається від лівого краю вікна браузера (рис. 1).
У випадку значення relative, елемент left обчислюється від лівого краю його початкового положення (рис. 2).
Якщо для батьківського елемента встановлено position: relative, то абсолютне позиціонування дочірніх елементів визначає їх положення від лівого краю батька.
Синтаксис
left: значення | відсотки | auto | inherit
Значення
Можна використовувати будь-які одиниці виміру, такі як пікселі (px), дюйми (in), пункти (pt) та інші. Значення left може бути від'ємним, що може призводити до накладання елементів один на одного. При встановленні значення в відсотках позиція елемента обчислюється від ширини батьківського елемента.
- auto
- Не змінює позицію елемента.
- inherit
- Наслідує значення батька.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>left</title>
<style>
.layer1 {
position: absolute; /* Абсолютне позиціонування */
left: 20px; /* Позиція від лівого краю */
background: #fc3; /* Колір фону */
margin: 7px; /* Відступи навколо елемента */
}
.layer2 {
position: relative; /* Відносне позиціонування */
left: -12px; /* Позиція від лівого краю */
top: 13px; /* Позиція від верхнього краю */
border: 1px solid black; /* Параметри рамки */
padding: 5px; /* Відступи навколо тексту */
margin: 7px; /* Відступи навколо елемента */
}
</style>
</head>
<body>
<div class="layer1">
<div class="layer2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>Результат цього прикладу показаний на рис. 4.
Об'єктна модель
[window.]document.getElementById("elementID").style.left
Браузери
У браузері Internet Explorer 6 для абсолютно позиціонованих елементів неможливо одночасно задати властивості top, left, right, bottom.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.