Позиціонування CSS: огляд, синтаксис та значення
Значення position визначає спосіб позиціонування елемента на веб-сторінці відносно вікна браузера або інших об'єктів.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значення
- absolute
- Елемент абсолютно позиціонований, відносно інших елементів на сторінці. Позиція задається властивостями
left,top,rightіbottom. - fixed
- Позиціонується відносно точки на екрані, не змінює положення при прокрутці сторінки.
- relative
- Позиціонується відносно вихідного місця елемента, зміщуючись відносно початкового розташування.
- static
- Елементи відображаються стандартно, без впливу позиціонування.
- inherit
- Наслідує значення батьківського елемента.
Детальніше про позиціонування елементів можна знайти за посиланням: Тут.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.layer1 {
position: relative;
background: #f0f0f0;
height: 200px;
}
.layer2 {
position: absolute;
bottom: 15px;
right: 15px;
line-height: 1px;
}
</style>
</head>
<body>
<div class="layer1">
<div class="layer2">
<img src="images/girl.jpg" alt="Девочка" />
</div>
</div>
</body>
</html>Браузери
Internet Explorer 6 не підтримує значення fixed. IE до версії 8.0 не підтримує значення inherit.