Ви можете встановити тип позиціонування для області або елемента. Для цього використовується властивість position. Ця властивість вказує, яким чином елемент повинен бути позиціонований. Усього доступно чотири різновиди позиціонування.
• static – не виконується жодного спеціального позиціонування, і відбувається звичайний текс-текст.
• relative – відбувається відносне позиціонування, яке орієнтується на нормальне або початкове положення елемента.
• absolute – відбувається абсолютне позиціонування за допомогою властивостей top, bottom, left і right. Елементи з абсолютною позицією знаходяться поза звичайним текс-текстом. Обчислюється абсолютна позиція відносно країв батьківського елемента (але тільки у випадку, якщо цей елемент не має властивості position: static).
• fixed – елемент абсолютно позиціонований. При прокрутці елемент залишається на місці.
Перші два варіанти надають можливість змінного позиціонування. Тут елементи позиціонуються відносно один одного. У наступних двох прикладах показано, як може виглядати цей тип позиціонування:
• Елемент 2 розташовується на 30 пікселів відносно елемента 1.
• Елемент 2 розташовується за елементом 1.
Зовсім інша ситуація є з fixed і static. Ці елементи можна розмістити в конкретних місцях. Вказівки щодо позиціонування відносяться до батьківського елемента або вікна браузера. Один приклад до цього:
• Елемент 1 розташовується точно на 30 пікселів від правого і на 20 пікселів від верхнього краю вікна браузера.
Нижче більш детально представлені різні варіанти позиціонування. Проте перед цим уточнення: В контексті позиціонування елементів важливу роль відіграє так зване плавання. Цей важливий принцип CSS я розкажу більш докладно у наступному підручнику. Узагальнюючи, суть плавання полягає в тому, як елементи веб-сторінки розтікаються в документі. При цьому елементи якомога більше притискаються у відповідному напрямку. За допомогою типу позиціонування можна чітко визначити потік елементу.
Відносне позиціонування
За допомогою відносного позиціонування з використанням position: relative відбувається два речі:
• Коробка витягується зі свого звичайного потоку.
• Початкове місце елемента залишається відведеним.
У зв'язку з відведенням початкового місця інші елементи ведуть себе так, ніби елемент насправді все ще знаходиться на місці.
Приклад:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Тут було визначено три коробки.
Обидві коробки 2 і 3 не отримали жодних вказівок щодо позиціонування. Тому вони слідують звичайному потоку документа. Коробка 1, з іншого боку, була позиціонована відносно. Зазвичай коробки 1 і 2 абсолютно не торкнуті коробкою 1. Місця коробки 1 цими коробками тому не займаються. За допомогою вказівок top, bottom, left та right відбувається позиціонування коробок. При відносному позиціонуванні виходять з початкового положення в документальному потоці (Flow).
• top: 25px – коробку зміщено вниз на 25 пікселів. Зверху до нормального положення коробки вставляються 25 пікселів.
• right: 25px – коробку зміщено вліво на 25 пікселів. Справа від нормального положення коробки вставлено 25 пікселів.
Вказівки у пікселях треба сприймати відносно початкового положення. При цьому вказівки визначають, де значення вставляється, тобто вгорі та справа. Цей аспект важливий. Вказівки тому не визначають, куди буде рухатися коробка.
Абсолютне позиціонування
Поряд з абсолютним позиціонуванням. Цей тип позиціонування повністю вилучає елемент з потоку. Інші елементи на сторінці уявляють, що елемент зовсім не існує.
Приклад:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Тут також було визначено три коробки. Коробка 1 повністю позиціонована.
Що відрізняється від відносного позиціонування, це те, що коробці 1 не відведено місце. Коробки 2 та 3 піднімаються вгору.
Вказівки позиціонування top, right, bottom або left тепер не орієнтуються на початкове положення коробки у потоці. Скоріше, вказівки відносяться до наступного навколишнього елементу, який був позиціонований з relative, absolute або fixed. Якщо навколишнього елементу немає, позиціонування відбувається відносно найвищого елемента у дереві документа, тобто html.
Позиціонування за допомогою fixed
За допомогою position: fixed можна зафіксувати елементи. Тут також є приклад:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Ефект розбивання, Частина 1</div>
<p>Протягом короткого періоду часу найновіший урок або відео-тренінг можна переглянути онлайн або довідатися про вміст категорії для завантаження без витрат за бали. Дізнайтеся більше тут ...</p>
</body>
</html>Фіксована область не прокручується разом з вмістом, а завжди залишається на вказаній позиції.
Для фіксованих областей обмежуючим елементом є завжди вікно браузера.
Зверніть увагу, що особливо в контексті фіксації елементів в старих браузерах виникають значні проблеми. Наприклад, IE6 не робить те, що він мав би робити. Тим, хто хоче оптимізувати свої веб-сайти для цього браузера, є дві можливості:
• Відмовитися від фіксованих областей.
• Використовувати хаки для IE.
Якщо ви хочете використати хак, рекомендую вам відвідати сторінку http://thestyleworks.de/tut-art/iewinfixed.shtml. Там за допомогою невеликого JavaScript показано, як можна вирішити проблему з фіксованими областями для цього браузера.
