Відмінності між версіями «15 Позиціонування»
м (Захист на 15 Позиціонування встановлено ([edit=sysop] (безстроково) [move=sysop] (безстроково))) |
Vorobel (Обговорення • внесок) м |
||
| Рядок 1: | Рядок 1: | ||
Блоки - прямокутні області, використовувані в CSS для формування і відображення документів. | Блоки - прямокутні області, використовувані в CSS для формування і відображення документів. | ||
| − | + | ||
| − | + | '''position''' - "relative" і "absolute". У першому випадку шар записується в потік, у другому - виділяється з нього. Практично це виглядає так: при "relative" наш шар знаходиться там, де ми його прописали, наприклад, в комірці таблиці і може використовуватися як простий текстовий блок (призначений за замовчуванням і в багатьох редакторах як текстовий блок і використовується). Це нас не особливо займає. У другому випадку - "absolute" - шар поміщається над площиною аркуша і позиціонується щодо верхнього лівого кута екрану. Якщо точніше, то позиціонування в даному варіанті не впливає на всі наступні блоки, але може впливати на дочірні елементи. У цьому випадку можна розмістити шар як над текстом, так і під ним. Все залежить від заданих параметрів. | |
| − | + | ||
| + | |||
| + | '''Абсолютне позиціонування''' | ||
| + | |||
| + | У моделі абсолютного позиціонування блок повністю видаляється з нормального потоку (і не впливає на наступні сестринські елементи), а потім йому призначається положення щодо контейнера. | ||
| + | |||
| + | ''static'' | ||
| + | |||
Положення блоку розраховується відповідно з нормальним потоком (воно називається нормальним положенням). Потім блок зміщується відносно свого нормального положення. Коли для розташування блоку B використовується модель відносного позиціонування, тоді положення наступного блоку розраховується так, як ніби блок B не був усунений. | Положення блоку розраховується відповідно з нормальним потоком (воно називається нормальним положенням). Потім блок зміщується відносно свого нормального положення. Коли для розташування блоку B використовується модель відносного позиціонування, тоді положення наступного блоку розраховується так, як ніби блок B не був усунений. | ||
absolute | absolute | ||
Положення блоку (можливо і розмір) вказується за допомогою властивостей "left", "right", "top" і "bottom". Вони вказують величину зсуву щодо контейнера блоку. Абсолютно позиціонуються блоки вилучаються з нормального потоку. Це означає, що вони не впливають на розміщення наступних сестринських елементів. Слід зауважити, що поля абсолютно позиціонуються блоків не перекриваються ні з якими іншими полями. | Положення блоку (можливо і розмір) вказується за допомогою властивостей "left", "right", "top" і "bottom". Вони вказують величину зсуву щодо контейнера блоку. Абсолютно позиціонуються блоки вилучаються з нормального потоку. Це означає, що вони не впливають на розміщення наступних сестринських елементів. Слід зауважити, що поля абсолютно позиціонуються блоків не перекриваються ні з якими іншими полями. | ||
| − | fixed | + | |
| − | + | ''fixed'' | |
| − | + | ||
| − | left - при абсолютному позиціонуванні задає відстань від лівого краю екрана. | + | Положення блоку розраховується у відповідності з моделлю абсолютного позиціонування, а потім він фіксується щодо деякого об'єкта. При використанні пристроїв без розбивки блок фіксується щодо області перегляду (і не переміщається при прокручуванні). |
| − | top - при абсолютному позиціонуванні задає відстань від верхнього краю екрана. | + | |
| − | width - ширина | + | |
| − | height - висота | + | '''Опис блоків''' |
| − | visibility - видимість шару. "Visible" - видимий, "hidden" - не бачимо. За замовчуванням усі шари видимі. | + | |
| − | z-index - положення шару відносно площини аркуша. Шар з індексом "3" буде поміщений над шаром з індексом "2". Можна задати і негативний індекс, тоді шар буде поміщений під таблиці з текстом. При від'ємному значенні шар розташовується під площиною сторінки, але над фоном. | + | ''left'' - при абсолютному позиціонуванні задає відстань від лівого краю екрана. |
| − | + | ||
| + | ''top'' - при абсолютному позиціонуванні задає відстань від верхнього краю екрана. | ||
| + | |||
| + | ''width'' - ширина | ||
| + | |||
| + | ''height'' - висота | ||
| + | |||
| + | ''visibility'' - видимість шару. "Visible" - видимий, "hidden" - не бачимо. За замовчуванням усі шари видимі. | ||
| + | |||
| + | ''z-index'' - положення шару відносно площини аркуша. Шар з індексом "3" буде поміщений над шаром з індексом "2". Можна задати і негативний індекс, тоді шар буде поміщений під таблиці з текстом. При від'ємному значенні шар розташовується під площиною сторінки, але над фоном. | ||
| + | |||
| + | '''Переміщуваний об'єкт''' - це блок, який зміщується по рядку в ліву або праву сторону. Найцікавішою властивістю переміщуваного об'єкта є те, що вміст може пересуватися уздовж однієї з його сторін (або не робити цього, якщо існує заборона, установлюваний властивістю "clear"). Вміст може пересуватися уздовж правої сторони лівостороннього переміщуваного блоку і вздовж лівої сторони правостороннього переміщуваного блоку. | ||
Поточна версія на 14:56, 20 червня 2013
Блоки - прямокутні області, використовувані в 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"). Вміст може пересуватися уздовж правої сторони лівостороннього переміщуваного блоку і вздовж лівої сторони правостороннього переміщуваного блоку.
