15 Позиціонування

Матеріал з Wiki TNEU
Версія від 14:56, 20 червня 2013; Vorobel (Обговореннявнесок)

(різн.) ← Попередня версія • Поточна версія (різн.) • Новіша версія → (різн.)
Перейти до: навігація, пошук

Блоки - прямокутні області, використовувані в 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"). Вміст може пересуватися уздовж правої сторони лівостороннього переміщуваного блоку і вздовж лівої сторони правостороннього переміщуваного блоку.

Особисті інструменти
Простори назв

Варіанти
Дії
Навігація
Інструменти