15 Позиціонування
Блоки - прямокутні області, використовувані в CSS для формування і відображення документів. position - "relative" і "absolute". У першому випадку шар записується в потік, у другому - виділяється з нього. Практично це виглядає так: при "relative" наш шари знаходиться там, де ми його прописали, наприклад, в комірці таблиці і може використовуватися як простий текстовий блок (призначений за замовчуванням і в багатьох редакторах як текстовий блок і використовується). Це нас не особливо займає. У другому випадку - "absolute" - шар поміщається над площиною аркуша і позиціонується щодо верхнього лівого кута екрану. Якщо точніше, то позиціонування в даному варіанті не впливає на всі наступні блоки, але може впливати на дочірні елементи. У цьому випадку можна розмістити шар як над текстом, так і під ним. Все залежить від заданих параметрів. Абсолютне позиціонування. У моделі абсолютного позиціонування блок повністю видаляється з нормального потоку (і не впливає на наступні сестринські елементи), а потім йому призначається положення щодо контейнера. Static Положення блоку розраховується відповідно з нормальним потоком (воно називається нормальним положенням). Потім блок зміщується відносно свого нормального положення. Коли для розташування блоку B використовується модель відносного позиціонування, тоді положення наступного блоку розраховується так, як ніби блок B не був усунений. absolute Положення блоку (можливо і розмір) вказується за допомогою властивостей "left", "right", "top" і "bottom". Вони вказують величину зсуву щодо контейнера блоку. Абсолютно позиціонуються блоки вилучаються з нормального потоку. Це означає, що вони не впливають на розміщення наступних сестринських елементів. Слід зауважити, що поля абсолютно позиціонуються блоків не перекриваються ні з якими іншими полями. fixed Положення блоку розраховується у відповідності з моделлю абсолютного позиціонування, а потім він фіксується щодо деякого об'єкта. При використанні пристроїв без розбивки блок фіксується щодо області перегляду (і не переміщається при прокручуванні). Опис блоків left - при абсолютному позиціонуванні задає відстань від лівого краю екрана. top - при абсолютному позиціонуванні задає відстань від верхнього краю екрана. width - ширина height - висота visibility - видимість шару. "Visible" - видимий, "hidden" - не бачимо. За замовчуванням усі шари видимі. z-index - положення шару відносно площини аркуша. Шар з індексом "3" буде поміщений над шаром з індексом "2". Можна задати і негативний індекс, тоді шар буде поміщений під таблиці з текстом. При від'ємному значенні шар розташовується під площиною сторінки, але над фоном. Переміщуваний об'єкт - це блок, який зміщується по рядку в ліву або праву сторону. Самим цікавим властивістю переміщуваного об'єкта є те, що вміст може пересуватися уздовж однієї з його сторін (або не робити цього, якщо існує заборона, установлюваний властивістю "clear"). Вміст може пересуватися уздовж правої сторони лівостороннього переміщуваного блоку і вздовж лівої сторони правостороннього переміщуваного блоку.
