1. схеми позиціонування
2. властивості position
3. зсув блоків
4. Властивості top, right, left і bottom
5. обтікання
6. властивості float
7. розміри блоків
8. Властивості width і height
9. Максимальні і мінімальні розміри
10. переповнення блоків
11. властивості overflow
12. усічення
13. властивості clip
14. видимість
15. властивості display
16. Шари в CSS
17. Властивості z-index

У цьому розділі

1. схеми позиціонування
2. зсув блоків
3. обтікання
4. розміри блоків
5. Максимальні і мінімальні розміри
6. переповнення блоків
7. усічення
8. видимість
9. шари

До теперішнього моменту нам уже відомі майже всі основоположні принципи CSS: синтаксис, селектори і модель уявлення. Що ще залишається дізнатися перш, ніж перейти до вивчення таких, в общем-то, банальних речей, як шрифтовое і кольорове оформлення? Адже саме для оформлення були призначені каскадні таблиці стилів? Насправді, є ще один дуже важливий аспект застосування CSS, а саме - позиціонування. Саме позиціонування допомагає створювати розмітку web-сторінок, і саме завдяки потужним і гнучким механізмам позиціонування в CSS 2 можна відмовитися від застосування такого архаїчного методу верстки web-сторінок, як використання HTML-таблиць.

Безумовно, позиціонування з використанням таблиць стилів - тема досить складна, багата багатьма нюансами і різними «підводними каменями» в частині тлумачення правил CSS розробниками різних програм перегляду. Але, з іншого боку, гра варта свічок, оскільки відмова від верстки документів з використанням звичайних таблиць і інших «хитрощів» на кшталт невидимих ​​зображень, дозволяє домогтися гнучкості в оформленні. А при вмілому використанні можливостей CSS можна отримувати досить складні ефекти, найчастіше навіть не реалізовуються засобами XHTML, і все це - без нагромаджень зайвого коду.

схеми позиціонування

У каскадних таблицях стилів, починаючи з рівня 2, підтримується три види позиціонування: нормальний потік (normal flow), що переміщуються об'єкти (floats) і абсолютне позиціонування (absolute positioning). Суть цих схем зводиться до наступних особливостей розміщення:

• Нормальний потік. До схеми нормального потоку відноситься все блочне форматування структурних елементів (block), строкове форматування строкових (inline) блоків, відносне позиціонування структурних і строкових блоків, а так само позиціонування контентно-залежних (run-in) блоків;
• Переміщувані об'єкти. Відповідно до цієї схеми об'єкт (блоковий або строковою) спочатку позиціонується в нормальному потоці, а потім зміщується максимально вліво або вправо. При цьому решта вмісту може обтікати такий об'єкт по протилежній стороні (тобто по стороні «спливання»);
• Абсолютне позиціонування. У схемі абсолютного позиціонування блок повністю видаляється з нормального потоку (і не впливає на наступні сестринські елементи), а потім йому призначається положення щодо містить контейнера.

За призначення елементу тієї чи іншої схеми позиціонування в CSS 2 відповідають властивості position і float, причому перше служить для позиціонування в нормальному потоці і абсолютного, а друге - лише для створення переміщуваних об'єктів.

Розглянемо тут властивість position. Воно може приймати одне із значень, наведених в табліце3.6.

Таблиця 3.6. Види позиціонування CSS Значення Задається вид позиціонування Опис static Нормальний потік (прийнято за замовчуванням) Звичайний блок, що позиціонується в контексті загального потоку. Позиціонування за допомогою властивостей CSS left і top неможливо relative Переміщуваний об'єкт Спочатку позиціонується як звичайний блок, а потім зміщується (властивості left, top) щодо цього положення. Розташування наступного блоку буде розраховуватися так, як ніби цей не був усунений absolute Абсолютне позиціонування Положення блоку (а, можливо, і його розмір) задається за допомогою властивостей left, top, right, bottom. Вони вказують величину зсуву щодо містить контейнера блоку fixed Абсолютне позиціонування (крім MSIE 6-7) Розміщення відбувається аналогічно absolute, але потім блок фіксується щодо вікна браузера і не переміщається при прокручуванні

Розглянемо поведінку позиціонуються блоків на прикладі, для чого звернемося до лістингу 3.6.

Лістинг 3.6. позиціонування

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"> <html> <head> <title> Позиціонування </ title> <style type = "text / css"> # abs1 {position: absolute; border: solid pink; color: pink} # stat1 {position: static; border: solid navy; color: navy} # rel1 {position: relative; top: 5px; border: solid brown; color: brown} # abs2 {position: absolute; border: solid green; color: green} </ style> </ head> <body> <div id = "abs1"> Абсолютно позиційований блок (absolute) вилучається із загального потоку. </ Div> <div id = "stat1"> Тому наступний за ним в документі звичайний (static) блок виводиться браузер не після нього, а так, як ніби перед ним нічого немає (в даному випадку це призводить до накладання). </ Div> <div id = "rel1"> А щодо позиційований блок (relative) зміщується від того місця, де він повинен знаходитися, на зазначену величину (в даному випадку - на 5 пікселів вниз). </ Div> <div id = "abs2"> При цьому, якщо для абсолютно позиціонованого блоку розташування явно не вказано, то воно обчислюється виходячи з того, де він повинен був би бути в загальному потоці. </ Div> </ body> </ html>

Всього тут задано 4 блоки, 2 з яких (перший і останній) є абсолютно позиціонувати, а 2 інших - нормального потоку. Для обох абсолютно позиціонуються блоків ніяких координат не задано, тому вони виводяться там, де повинні були б бути в загальному потоці. Так, перший блок виведено на самому початку документа. Однак через те, що він виведений із загального потоку документа, то починаючи виводити наступний за ним блок, браузер вважає, що до нього нічого не було. У підсумку початкова координата виведення у обох блоків збігається, що призводить до їх накладення один на одного (рис. 3.9).

Далі слід щодо позиційований блок. Оскільки попередній блок не був абсолютно позиційованим, то висновок цього блоку починається після попереднього. Але завдяки тому, що третій блок не зовсім звичайний, а щодо позиційований, і для нього задано зміщення (top: 5px), то його висновок починається з відступом на 5 пікселів від того місця, де він повинен був би знаходитися в звичайному потоці.

Мал. 3.9. Абсолютна і відносне позиціонування

Нарешті, останній блок, як і перший, є абсолютно позиційованим, а його висновок починається від того місця, де мав би перебувати попередній блок в нормальному потоці. У нашому випадку це призводить до того, що останній блок накладається на попередній на ті самі 5 пікселів, що були вказані для його відносного зсуву. Власне кажучи, для того, щоб відбулося це накладення, останньому блоку зовсім не обов'язково бути абсолютно позиційованим: точно так же був би виведений будь-який інший блок, розташування для якого обчислювалося б на основі загального потоку.

Фіксоване позиціювання аналогічно абсолютному з тією лише різницею, що фіксовані блоки завжди знаходяться на одному і тому ж місці щодо області перегляду. Наприклад, можна створити такий фіксований блок:

<Div style = "position: fixed"> Фіксований блок </ div>

Якщо тепер заповнити документ будь-яким вмістом так, щоб з'явилася смуга прокрутки, то можна буде побачити, що під час прокрутки документа текст «Фіксований блок» залишається на місці (див. Файл Part_3 \ Position \ fixed.html). На жаль, така поведінка вірно лише для Mozilla-браузерів і Opera, а Netscape 4 і MSIE не сприймають ключове слово «fixed», і, як наслідок, такий блок буде вважатися нормальним (static). Відповідно, для забезпечення сумісності бажано використовувати обидва оголошення - спочатку absolute, а потім - fixed і «розвести» їх за допомогою правил селекторів так, щоб не підтримують фіксований висновок браузери «побачили» абсолютне позиціонування, а більш прогресивні - фіксоване. В такому випадку блок, по крайней мере, буде виведений із загального потоку, і не буде впливати на подальше виведення документа.

властивості position

Значення за замовчуванням: static.
Успадковані значення: немає.
Застосовується: до всіх елементів.
Сумісність: все.

зсув блоків

Тільки що ми розглянули управління позиціонуванням за допомогою властивості position, але власне зміна розташування об'єктів на екрані залишилося не освітленим. Отже, за зміщення блоків в CSS відповідають 4 властивості - top, right, left і bottom. Паралельно ці ж властивості можуть впливати і на розміри блоку, хоча для вказівки розмірів передбачені інші властивості - width і height, але про них мова піде трохи пізніше. Що ж стосується властивостей зміщення, то вони визначають наступне:

• top. Задає зміщення верхнього сегмента внутрішньої крайової лінії щодо верхнього сегмента крайової лінії містить блоку, або, простіше кажучи - визначає зсув верхньої межі вниз щодо того місця, де цей блок повинен був знаходитися;
• right. Задає зміщення правого сегмента внутрішньої крайової лінії щодо правого сегмента крайової лінії містить блоку (визначає зміщення правої межі вліво);
• left. Задає зсув лівого сегмента внутрішньої крайової лінії щодо лівого сегмента крайової лінії містить блоку (визначає зміщення лівої межі вправо);
• bottom. Задає зсув нижнього сегмента внутрішньої крайової лінії щодо нижнього сегмента крайової лінії містить блоку (визначає зміщення нижньої межі вгору).

Дія, що виконується властивостями зміщення, можна назвати як зміщенням (особливо в контексті щодо позиціонуються елементів), так і розміщенням на сторінці (при абсолютному позиціонуванні) або в області перегляду (при фіксованому). Так само слід зазначити, що блоки звичайного потоку не можуть мати даних властивостей, а якщо ви їх і призначите, то вони будуть проігноровані.

ПРИМІТКА
Насправді, це важливе зауваження: нерідко можна почути, що, мовляв, щось з браузерами або з CSS не так, оскільки зміщення за допомогою left, top і т.д. "не працюють". Насправді, така проблема може мати лише одне пояснення: для блоку, до якого намагаються застосувати зміщення, не вказано потрібне позиціонування - адже для прийнятого за замовчуванням статичного розміщення вказувати зміщення неприпустимо!

Значення для зміщення задаються або в абсолютних розмірах (length), або у відсотках по відношенню до ширини містить блоку, або вказують auto. Останнє значення прийнято за замовчуванням, і знаходиться в залежності від таких властивостей, як width і height, які, в свою чергу, можуть бути обчислюються на підставі вмісту блоків. Важливо так само відзначити, що значення можуть бути як позитивними, так і негативними, тобто якщо запис «left: 100px» вказує на зсув лівої крайової лінії блоку вправо на 100 пікселів, то «left: -100px» змусить браузер змістити ліву кордон на 100 пікселів вліво.

На практиці найчастіше задають пару значень left і top, визначаючи таким чином ліву верхню вершину утворює блок прямокутника, а значення right і bottom обчислюються браузером автоматично на підставі розмірів блоку:

.menu {position: absolute; left: 10px; top: 50px; }

Тут заданий клас menu, що визначає абсолютно позиційований блок зі зміщенням лівої межі на 10 пікселів вправо і верхньої - на 50 вниз. Приклади такого позиціонування зі зміщенням можна подивитися у файлі topleft.html.

Властивості top, right, left і bottom

Значення за замовчуванням: auto.
Успадковані значення: немає.
Застосовується: до позиційованим елементам.
Сумісність: top і left - все, right і bottom - все, крім MSIE 6-7.

обтікання

Тепер, коли ми вже знайомі з відносним і абсолютним позиціонуванням, і навіть вміємо встановлювати зсув, звернемося до останнього виду позиціонування - переміщуються об'єктів. Переміщуваний об'єкт - це блок, який зміщується по рядку в ліву чи праву сторону. Особливістю переміщуваного об'єкта є те, що вміст може пересуватися уздовж однієї з його сторін: уздовж правого боку для лівостороннього переміщуваного блоку і вздовж лівого боку для правостороннього переміщуваного блоку. Щоб зробити блок обтічним, а заодно визначити, якою стороною повинно відбуватися обтікання, використовують властивість float, яке може приймати одне з трьох значень:

• left. Переміщуваний блок буде зміщений максимально вліво, а обтікання відбуватиметься по правій стороні;
• right. Переміщуваний блок буде зміщений максимально вправо, а обтікання відбуватиметься по лівій стороні;
• none. Блок не переміщається і обтікання не проводиться (прийнято за замовчуванням).

За своєю суттю властивість float схоже з HTML-атрибутом ALIGN у елементів типу IMG, OBJECT і подібних. Однак в CSS передбачається його використання не тільки для картинок і інших впроваджуваних об'єктів, а й для будь-яких блоків: .lf {float: left; }

Тут ми визначили клас «lf», і будь-який об'єкт цього класу, будь то малюнок, абзац або таблиця, буде зміщений вліво, і мати обтікання по правій межі (див. Файл floats.html).

При цьому слід враховувати, що оскільки переміщуваний об'єкт, з одного боку, повинен бути зміщений до краю, а з іншого - отримати обтікання, то для нього повинна бути визначена ширина, і бажано - явно, за допомогою властивості width. Втім, з розмірністю в CSS 2 нам ще належить щільно познайомитися, в той час, як до властивості float має безпосереднє відношення ще одна властивість CSS - clear, що відповідає за можливість обтікання. Воно визначає, які сторони блоку, породженого елементом, не можуть бути сусідами з розташованим раніше переміщуються блоком.

Розглянемо цей аспект докладніше. Нехай у нас є переміщуваний блок з обтіканням справа (float: left). Якщо за ним розташувати інший блок з властивістю clear, також встановленим в left (clear: left), то вміст такого блоку обтікати його не буде, а розташується після нього: для цього автоматично буде розширено його верхнє зовнішнє поле (margin). Якщо ж наступний за переміщуються блоком елемент матиме властивість clear, встановлене в right, то обтікання відбуватиметься. Вірно і зворотне: якщо б переміщуваний блок мав обтікання по правій стороні (float: right), то наступний блок (з clear: left) так само зміг обтікати його.

Але якщо знадобиться заборонити обтікання в будь-якому випадку, то можна скористатися ще одним значенням для властивості clear - both, що забороняє обтікання по обидва боки блоку.

Нарешті, якщо забороняти обтікання не треба, то можна використовувати значення none, або взагалі не вказувати властивість clear, оскільки саме none є значенням за замовчуванням.

властивості float

Значення за замовчуванням: none.
Успадковані значення: немає.
Застосовується: float - до всіх елементів, крім абсолютно позиціонуються блоків; clear - тільки до структурних блокам.
Сумісність: все.

розміри блоків

Розглядаючи питання позиціонування, ми вже неодноразово згадували розміри блоків, але жодного разу не розглядали спеціально призначені для цього властивості CSS. Пора заповнити цю прогалину і познайомитися з властивостями width і height, які відповідають відповідно за ширину і висоту блоку.

Почнемо з ширини, як з найбільш передбачуваного і добре підтримується браузерами властивості. Подібно до інших елементів розмірності блоків, ширину можна задавати в пікселях або в інших абсолютних розмірах (length), у відсотках по відношенню до ширини містить блоку, або ж за допомогою ключового слова auto для того, щоб браузер підібрав ширину самостійно. Важливо відзначити, що властивість width задає ширину вмісту контейнера, тобто розміри по внутрішньому кордоні блоку.

УВАГА
Браузери MSIE версій 5.0 та 5.5 сприймає width як ширину вмісту разом з рамкою і внутрішнім полем. Ця помилка була виправлена ​​тільки у версії 6.0, причому для коректного сприйняття потрібна наявність визначення DOCTYPE в заголовку документа. В іншому випадку MSIE 6 буде використовувати т.зв. «Режим сумісності зі старими версіями», і розміри також будуть визначені невірно.

Розглянемо типове застосування ширини - для обмеження ширини блоку-врізки. Нехай це буде унікальний блок з ідентифікатором w1, шириною вмісту 200 пікселів, внутрішнім відступом 15 пікселів і зовнішнім полем в 10 пікселів, з обтіканням по правій стороні:

# W1 {width: 200px; padding: 15px; margin: 10px; float: left;}

Вміст такого блоку буде обмежено по ширині 200-ми пікселями, а все подальше вміст документа буде обтікати його справа. Таким вмістом може бути і інший блок, який має певну ширину, наприклад, половину вікна браузера:

# W2 {width: 50%; padding: 5px; margin: 0px; }

Якщо тепер створити документ, який містить елементи з ідентифікаторами w1 і w2, заодно (для наочності) додавши до визначення стилів рамки, як це показано в лістингу 3.7, то можна буде побачити використання ширини блоків і їх взаємне розташування (рис. 3.10).

Лістинг 3.7. Використання width

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"> <html> <head> <title> Ширина </ title> <style type = "text / css"> # w1 {width: 200px; padding: 15px; margin: 10px; border: dashed 1px gray; float: left;} # w2 {width: 50%; padding: 5px; margin: 0px; border: dashed 1px gray;} </ style> </ head> <body> <div id = "w1"> Блок w1 з шириною вмісту 200 пікселів, з внутрішнім полем 15 пікселів, і зовнішнім полем в 10 пікселів. </ Div> <div id = "w2"> Блок w2 з шириною вмісту в половину вікна браузера і внутрішнім полем 5 пікселів. </ Div> </ body> </ html>

Мал. 3.10. Блок w2 обтікає блок w1, а загальна частина зовнішнього поля встановлена ​​в 10 пікселів

При цьом слід Зазначити, що, з одного боку, Зовнішні поля у двох суміжніх блоків зліваються в Одне розміром з найбільшу з двох, а з Іншого - ліве поле іншого блоку Було автоматично розшірено таким чином, щоб вміст блоків НЕ зустрічалося. Правда, остання умова не виконується в MSIE: цей браузер переміщує другий блок вправо повністю, разом з полями і вмістом (рис. 3.11).

Мал. 3.11. В MSIE блок w2 перетворився на відносно позиційований, а логіка обчислення спільного кордону відома тільки Богу і Гейтсу

Хоча така поведінка і не є вірним з точки зору правил CSS, з огляду на популярність браузера від Microsoft, доводиться брати цю особливість Internet Explorer в розрахунок. В даному випадку проблема може бути частково вирішена вкладанням блоку w1 в контейнер w2:

<Div id = "w2"> <div id = "w1"> Блок w1 ... </ div> Блок w2 ... </ div>

Примітка
Хоча подібне рішення і знімає проблему з розміщенням блоків, залишається відкритим питання з розмірами полів: тут залишається лише підбирати значення таким чином, щоб зберегти прийнятний зовнішній вигляд для обох форматів виводу, тобто для продукту Microsoft - з одного боку, і всіх інших програм, що підтримують таблиці стилів - з іншого.

Аналогічно ширині, в CSS призначається і висота, тільки замість властивості width використовують властивість height:

# H1 {height: 100px;}

Подивитися приклади використання властивості width можна, звернувшись до файлу width.html, а властивості height - height.html.

Властивості width і height

Значення за замовчуванням: auto.
Успадковані значення: немає.
Застосовується: до всіх елементів, крім незамінюваних строкових, рядків таблиць і груп рядків таблиць.
Сумісність: все.

Максимальні і мінімальні розміри

У ряді випадків буває корисним не просто поставити висоту (або ширину) блоку, а вказати її мінімальне або максимальне значення. Наприклад, на всіх сторінках сайту може бути блок для основної інформації, причому, цілком ймовірно, що на одних він буде мати всього кілька рядків у висоту, а на інших - кілька десятків або навіть сотень. В такому випадку вказувати якесь певне значення для height стає безглуздим, оскільки або особливо «об'ємні» сторінки в ньому не вмістяться, або буде занадто багато місця в «коротких» сторінках. Тут нам на допомогу приходить властивість min-height, що дозволяє вказати мінімальне значення висоти блоку:

div.content {min-height: 300px;}

Таким чином ми задали мінімальну висоту для блоків класу content в 300 пікселів. В результаті, навіть якщо в ньому буде всього один рядок тексту (або навіть взагалі нічого не буде!), Все одно він займе відведені йому 300 пікселів у висоту. До цього моменту властивість min-height діє подібно height. Однак якщо ми помістимо в цей блок якесь вміст, що не вписується в висоту 300 пікселів, він буде автоматично розширено.

Примітка
З цієї точки зору властивість min-height схоже не те, як працює height в MSIE. І оскільки MSIE не підтримує установку мінімальних і максимальних розмірів, в ряді випадків можна використовувати height для MSIE і min-height - для інших браузерів - див. Приклад у файлі minmax.html.

Протилежне властивість max-height, навпаки, обмежує максимально допустиму висоту блоку, що, в свою чергу, може бути корисно для тих випадків, коли вміст другорядного блоку може зіпсувати дизайн сторінки, якщо раптом вийде за певні рамки. Це може бути, рекламний блок або будь-яке інше вміст, втрата частини видимості якого нікого не розчарує:

div.banner {max-height: 50px; max-width: 50%;}

Тут ми використовували відразу два обмеження - в 50 пікселів по висоті за допомогою max-height, і в половину від максимально можливої ​​ширини, застосувавши властивість max-width.

УВАГА
Зверніть увагу: значення, що задаються у відсотках, розраховуються щодо автоматично обчислює розміру самого генерується блоку, а не від розміру містить блоку. Це вірно і для «звичайних», і для максимальних і мінімальних розмірів.

Нарешті, якщо нам знадобилося б обмежити ширину не в максимальному, а в мінімальному значенні, то ми могли б застосувати властивість min-width:

div.info {min-width: 100px;}

Тут ми вказали, що блоки з класом info повинні мати ширину не менше 100 пікселів.

Мінімальні і максимальні значення можна комбінувати. Припустимо, нам треба зробити так, щоб блок заголовка сторінки був вистій не менше 2 рядків, але не більше 3. У такому випадку досить написати наступне:

div.header (min-height: 2em; max-height: 3em;}

Залишається тільки додати, що якщо вказано безпосереднє значення ширини або висоти блоку, тобто width або height, то вказівка ​​мінімальних і максимальних значень втрачає будь-який сенс, оскільки в такому випадку вони будуть автоматично приведені до значень, зазначених у height (для min-height і max-height) або в width (для min-width і max-width ).

Значення за замовчуванням: auto.
Успадковані значення: немає.
Застосовується: до всіх елементів, крім незамінюваних строкових і елементів таблиць.
Сумісність: все, крім MSIE 6-7.

переповнення блоків

Досить часто відбувається так, що вміст блоку не вкладається в нього (припустимо, блок із заданими розмірами 100 на 150 пікселів містить картинку 150 на 200, або просто багато тексту). У такому випадку його розміри повинні залишитися незмінними, але саме вміст, тим не менш, буде показано повністю, перекриваючи при цьому сусідні блоки - це називають переповненням блоку. Таку ситуацію ви могли спостерігати, якщо переглядали файл прикладу height.html в Opera або в Mozilla (MSIE просто збільшує розміри самого блоку, ігноруючи задані автором значення).

За допомогою властивості overflow можна управляти поведінкою браузера в разі переповнення. Воно може приймати одне з наступних значень:

• visible. Вміст буде показано повністю, можливо, поверх сусідніх блоків (або блок буде розширено до необхідних розмірів у випадку з MSIE), це значення прийнято за замовчуванням;
• hidden. Вміст буде урізано на межі блоку, користувач не зможе побачити його (хоча в Mozilla передбачений неявний механізм прокручування за допомогою курсору мишки);
• scroll. Вміст буде урізано на межі блоку, і будуть створені 2 смуги прокрутки для того, щоб користувач міг побачити весь вміст, причому смуги прокрутки будуть в будь-якому випадку, навіть якщо вміст повністю вміщується у відведені розміри;
• auto. Аналогічно scroll, але смуги прокрутки будуть створені тільки в разі потреби, причому, можливо, тільки горизонтальна або тільки вертикальна.

Розглянемо дію цих значень на прикладі лістингу 3.8 (див. Також файл overflow.html).

Лістинг 3.8. Використання width, height і overflow

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"> <html> <head> <title> Переповнення </ title> <style type = "text / css"> div {border: solid 1px gray; background: lightgreen; float: left} # o1 {width: 120px; height: 100px; overflow: visible} # o2 {width: 120px; height: 100px; overflow: hidden} # o3 {width: 120px; height: 100px; overflow: scroll} # o4 {width: 120px; height: 100px; overflow: auto} # o5 {width: 120px; height: 100px; overflow: auto} </ style> </ head> <body> <div id = "o1"> Блок o1, вміст якого явно не поміщається в відведені 120 на 100 ... </ div> <div id = "o2" > Блок o2, вміст якого теж не поміщається в відведені 120 на 100 ... </ div> <div id = "o3"> Блок o3, вміст якого не вміщується у відведені 120 на 100 ... </ div> <div id = "o4"> Блок o4, вміст якого не вміщується у відведені 120 на 100 ... </ div> <div id = "o5"> вміст блоку o5 поміщається, смуг прокрутки немає. </ Div> </ body> </ html>

Якщо тепер ознайомитись з результатами в браузері, то ми побачимо, що в першому випадку ми бачимо звичайний варіант - що не помістилося в рамки блоку вміст було все одно відображено браузером, а в другому блоці все, що не влізло, просто приховано (рис. 3.12). У третьому блоці вміст теж обрізано, але ми бачимо дві смуги прокрутки, за допомогою яких можна переглянути те, що знаходиться поза видимій області. Якщо прокрутити його вниз, то можна переконатися, що горизонтальна смуга прокрутки тут не потрібна, але вона, тим не менш, присутній. Зате в наступному блоці її немає, оскільки властивість auto вказує браузеру, що смугу прокрутки треба створювати лише при необхідності. З цієї причини в останньому, п'ятому блоці, взагалі немає смуг прокрутки, оскільки весь вміст і так прекрасно поміщається в відведену область.

Мал. 3.12. Варіанти усічення переповнюють блоків

властивості overflow

Значення за замовчуванням: visible.
Успадковані значення: немає.
Застосовується: до структурних і замінним елементам, осередкам таблиць.
Сумісність: все. Переповнення по окремим осях (overflow-x, overflow-y) не підтримуються в MSIE 6-7.

усічення

Для абсолютно позиціонуються блоків передбачено додатково властивість, яка керує безпосередньо урізанням вмісту блоку - clip, яке визначає, яка частина весь вміст елемента є видимою. За замовчуванням (значення auto) розмір області усічення збігається з розміром блоку, породженого елементом. Якщо ж вказати конкретне значення за допомогою функції rect (), то вміст буде обмежено вказаними межами:

div.clipped {position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; overflow: hidden; clip: rect (10px, 90px, 90px, 10px); }

В даному випадку видима частина вмісту буде додатково урізана на 10 пікселів з кожного боку.

Слід також відзначити той факт, що властивість clip може бути застосовано тільки до елементів, для яких вказано властивість overflow із значенням, відмінним від visible. Таким чином, якщо ви захочете використовувати властивість clip, то переконаєтеся, що блок вже має не тільки значення position, встановлене в fixed або absolute, але і overflow в hidden, auto або scroll.

Примітка
У реалізації цієї властивості у різних програм перегляду є деякі відмінності. Так, Mozilla повністю приховує вміст поза позначеної за допомогою clip області, в той час як Opera приховує тільки вміст, але не сам блок (тобто, скажімо, фон і межі залишаться видимими, якщо, звичайно, вони є).

властивості clip

Значення за замовчуванням: auto.
Успадковані значення: немає.
Застосовується: до абсолютно позиційованим елементам.
Сумісність: Mozilla, Opera.

видимість

Властивості overflow і clip дозволяють приховати або показати частину блоку, проте для того, щоб повністю приховати (або навпаки, показати) блок використовують інше властивість - visibility. Воно може приймати значення visible, hidden і collapse, кожне з яких стосовно цій властивості означає наступне:

• visible. Блок буде видимим (прийнято за замовчуванням);
• hidden. Блок буде невидимим (повністю прозорим), але місце під нього все одно буде зарезервовано;
• collapse. Застосовується тільки до рядках і стовпцях таблиць (або до їх групам). Робить належать до групи осередку невидимими, звільняючи при цьому займане ними місце;

Як правило, при використанні visibility обмежуються лише двома значеннями цієї властивості - visible і hidden, оскільки collapse, по-перше, не підтримується MSIE, а по-друге - іноді поводиться досить непослідовно в інших браузерах, особливо коли справа стосується колонок.

Примітка
Очевидно, що зміна видимості на практиці проводиться за допомогою сценаріїв, динамічно змінюють встановлений для того чи іншого блоку значення - інакше відвідувач сторінки так ніколи і не побачить невидимі об'єкти.

Розглянемо призначення видимості на наступному прикладі:

<Div style = "height: 100px; visibility: hidden;"> Блок v1 - невидимий! </ Div> <div style = "height: 100px; visibility: visible;"> Блок v2 - видимий! </ Div>

Якщо подивитися такий приклад в браузері, то можна побачити, що хоча перший блок і невидимий, другий починається з відступом зверху, відповідним встановленої висоті невидимого блоку, тобто місце було виділено. Якби стояло інше завдання - повністю видалити блок, то слід було б застосувати інше властивість - display із значенням none:

<Div style = "display: none;"> Цей блок - не тільки невидимий, але і не займає місця! </ Div>

Приклади призначення видимості, в тому числі з динамічними змінами і спробою використання властивості collapse можна подивитися у файлі visible.html.

властивості display

Значення за замовчуванням: visible.
Успадковані значення: так.
Застосовується: до всіх елементів.
Сумісність: все.

Шари в CSS

На завершення теми позиціонування слід познайомитися з третім виміром розмітки документів. Якщо раніше нам зустрічалося позиціонування тільки по осях x і y (відступи зліва і зверху, ширина і висота), то тепер настав час ознайомитися з віссю z.

Позиціонування об'єктів уздовж осі z виявляється зручним, коли візуально відбувається їх накладення, як це показано в лістингу 3.9.

Лістинг 3.9. Позиціонування по осі z

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"> <html> <head> <title> Шари </ title> <style type = "text / css"> .layers {position: absolute; left: 100px; top: 100px; border: solid gray;} </ style> </ head> <body> <div class = "layers" style = "z-index: 1; background: #DDD;"> Блок # 1 буде нижнім серед інших позиціонуються по z (Z = 1) </ div> <div class = "layers" style = "z-index: 3; background: #FFF;"> Блок # 2 розташується поверх всіх інших (Z = 3) </ div> <div class = "layers" style = "z-index: 2; background: #EEE;"> Блок # 3 розташується між першим і другим блоками (Z = 2) </ div> <div class = "layers" style = "background : #CCC; "> Ну а 4-й відправиться в самий низ по осі Z - навіть нижче, ніж перший (Z = auto) </ div> </ body> </ html>

Тут ми маємо 4 блоки, які мають спільні початкові координати по осях x і y (100, 100). Якби ми не стали тут використовувати позиціонування шарів, то послідовне накладення блоків призвело б до того, що кожен наступний блок перекривав би собою попередній, в результаті чого ближче всіх до користувача виявився б останній блок, під ним розташувався б передостанній, і т.д . У нашому ж випадку, завдяки застосуванню властивості z-index, вони розташовуються так: другий, третій, перший, четвертий (рис. 3.13).

Мал. 3.13. Позиціонування по осі z

Залишається лише відзначити, що породжується елементом блок за замовчуванням має той же позиційний рівень, що і його батьківський блок.

Властивості z-index

Значення за замовчуванням: auto.
Успадковані значення: немає.
Застосовується: до позиційованим елементам.
Сумісність: все.

2011-06-19 // Є питання, пропозиції, зауваження? Ви можете обговорити це на форумі !