67269

Абсолютне і фіксоване позиціонування CSS

Лекция

Информатика, кибернетика и программирование

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

Украинкский

2014-09-06

125 KB

1 чел.

Тема № 11: «Абсолютне і фіксоване позиціонування CSS»

ЗМІСТ

Вступ

Охоплюючі блоки

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

Визначення позиції

Визначення розмірів

Третій вимір – z-індекс 

Фіксоване позиціонування

Резюме

Контрольні запитання


Вступ

Тепер прийшов час звернути нашу увагу на другу пару значень властивості position – absolute і fixed. Перша пара значень – static і relative – тісно пов’язані, і ми розглянули їх досить докладно у попередній темі.

Абсолютно позиційовані елементи повністю видаляються з потоку документа. Це означає, що вони взагалі не роблять впливу на свій елемент предок або на елементи, які з’являються після них у вихідному коді. Абсолютно позиційований елемент буде перекривати інший контент, якщо цьому не перешкодити спеціальними діями. Іноді, звичайно, це перекриття є тим, що потрібно, але потрібно знати про це, щоб бути впевненим, що буде отримане необхідне компонування!

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

У цій темі ми розглянемо декілька практичних прикладів використання абсолютного і фіксованого позиціонування, а також деякі особливості підтримки в браузерах, і дослідимо концепцію z-індексу.

Перш ніж говорити про все це, розглянемо важливу попередню концепцію – охоплюючі блоки.

  1.  Охоплюючі блоки

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

Для статичних боксів і відносно позиційованих боксів охоплюючий блок є найближчим предком блокового рівня – елемент предок, іншими словами. Однак, для абсолютно позиційованих елементів це трохи складніше. У цьому випадку охоплюючий блок є найближчим позиційованим предком. Під “позиційованим” розуміється елемент, властивість position якого задана як relative, absolute або fixed – іншими словами, будь-який елемент, крім звичайних статичних елементів.

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

Якщо абсолютно позиційований елемент не має позиційованого предка, то осяжний блок називають іноді “початковим осяжним блоком”, що на практиці збігається з елементом html. При перегляді Web-сторінки на екрані це означає вікно браузера, при друку сторінки це означає кордон сторінки.

Елементи з фіксованим позиціюванням злегка від цього відрізняються – вони завжди мають початковий осяжний блок в якості свого осяжного блоку.

Отже, давайте підсумуємо це в множині простих кроків – щоб знайти охоплюючий блок для елемента з position: absolute, необхідно зробити наступне:

  1.  Подивіться на елемент предок абсолютно позиційованого елемента – чи має властивість position цього елемента одне зі значень relative, absolute або fixed?
  2.  Якщо це так, то ви знайшли охоплюючий блок.
  3.  Якщо ні, переходьте в елемент предок елемента предка і повторіть з кроку 1, поки не знайдете охоплюючий блок або закінчаться елементи предки.
  4.  Якщо ви дійшли до елемента html, не знайшовши розміщеного предка, то охоплюючим елементом буде елемент html.
  5.  Абсолютне позиціювання

Фіксоване позиціювання є спеціальною формою абсолютного позиціювання, тому ми розглянемо його пізніше і зосередимося тут на більш загальному випадку. Якщо не сказано інше, то при використанні терміну “абсолютне позиціонування” з даного моменту і до кінця теми будуть матися на увазі елементи, що мають position: fixed або position: absolute.

Визначення позиції

При розгляді відносного позиціонування ми дізналися, що для визначення позиції боксу можна використовувати властивості top, right, bottom і left. Ці ж властивості використовуються для визначення позиції абсолютно позиціонованого боксу, але спосіб їх використання абсолютно інший.

Для відносно позиціонованого елемента чотири властивості визначають відносну відстань для зсуву згенерованого боксу. Пам’ятайте, що у випадку відносного позиціонування вони доповнюють один одного, так що top: 1em і bottom:-1em означають одне і те ж, і не має сенсу визначати одночасно top і bottom (або left і right) для одного і того ж елемента, так як одне зі значень буде проігноровано.

Ці положення невірні в разі абсолютного позиціювання. Тут всі чотири властивості можна використовувати одночасно для визначення відстані від кожного краю позиціонованого елемента до відповідного краю охоплюючого блоку. Можна визначити також позицію одного з кутів абсолютно позиціонованого боксу – наприклад, використовуючи top і left – а потім визначити розміри боксу, використовуючи width і height (або взагалі не використовувати width і height, якщо ви хочете дозволити боксу стискатися відповідно до його контенту).

Microsoft Internet Explorer версії 6 і більше старі не підтримують метод завдання всіх чотирьох ребер, але підтримують метод завдання одного кута і розмірів.

/* Цей метод працює в IE6*/

#foo {

position: absolute;

top: 3em;

left: 0;

width: 30em;

height: 20em;

}

/* Цей метод працює в IE6 */

#foo {

position: absolute;

top: 3em;

right: 0;

bottom: 3em;

left: 0;

}

Маємо тут запам’ятати, що значення, які задаються для властивостей top, right, bottom і left визначають відстань від країв елемента до відповідних країв його охоплюючого блоку. Це не відповідає координатній системі, де кожне значення задається щодо однієї точки початку координат. Наприклад, right: 2em означає, що правий край абсолютно позиціонованого боксу буде відстояти на 2em від правого краю осяжний блоку.

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

Давайте розглянемо приклад, щоб побачити, як це працює.

  1.  Скопіюйте наведений нижче код в текстовий редактор і збережіть документ як absolute.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Absolute Positioning</title>

<link rel="stylesheet" type="text/css" href="absolute.css">

</head>

<body>

<div id="outer">

<div id="inner"></div>

</div>

</body>

</html>

  1.  Потім скопіюйте наступний код в новий файл і збережіть його як absolute.css.

html, body {

margin: 0;

padding: 0;

}

#outer {

margin: 5em;

border: 1px solid #f00;

}

#inner {

width: 6em;

height: 4em;

background-color: #999;

}

  1.  Збережіть обидва файли і завантажте документ HTML в браузер. Ви побачите сірий прямокутник, оточений досить широким червоним кордоном. Елемент #inner має зазначену ширину і висоту і сірий колір фону. Елемент #outer, який є структурним предком #inner, має червоний кордон. Він має з усіх сторін також поле шириною 5em, щоб змістити його від країв вікна браузера, і більш чітко бачити, що відбувається. Поки нічого дивного, чи не так? Висота елемента #outer задана його елементом нащадком (#inner) і шириною горизонтальних полів.
  2.  Тепер подивимося, що станеться, якщо зробити елемент #inner абсолютно позиційованим! Додайте наступне виділене оголошення в правило #inner:

#inner {

width: 6em;

height: 4em;

background-color: #999;

position: absolute;

}

  1.  Збережіть і перезавантажте документ. Замість червоної межі навколо сірого прямокутника, тепер є тільки щось схоже на більш товсту верхню межу. А сірий бокс взагалі не зрушив! Ви очікували це?

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

Те, що виглядає як червона лінія товщиною 2px, є насправді кордоном товщиною 1px навколо елементу з нульовою висотою – ви бачите верхню і нижню межі і нічого між ними.

Друга цікава подія полягає в тому, що абсолютно позиційований бокс не зміщується. Значення за замовчуванням для властивостей top, right, bottom і left буде auto, що означає, що абсолютно позиційований бокс з’явиться точно там, де він був би, якщо б не був позиціонований. Однак, так як він був видалений з потоку, він буде перекривати всі елементи в нормальному потоці, які йдуть за ним.

Насправді це дуже корисно – можна використовувати це, якщо ви хочете тільки перемістити згенерований бокс в одному напрямку. Наприклад, у спадному меню, керованому CSS, панелі, які “розкриваються”, можна абсолютно позиціонувати, визначаючи тільки властивість top. Вони будуть потім автоматично з’являтися в очікуваній координаті по осі X (так само, як і їх предок).

  1.  Потім давайте задамо висоту для елемента #outer, щоб він знову виглядав як прямокутник, і зміщував #inner в сторону. Додайте наступні виділені рядки в правила CSS:

#outer {

margin: 5em;

border: 1px solid #f00;

height: 4em;

}

#inner {

width: 6em;

height: 4em;

background-color: #999;

position: absolute;

left: 1em;

}

  1.  Збережіть і перезавантажте, і ви побачите деякі зміни. Елемент #outer буде тепер знову прямокутником, так як ви задали для нього висоту. Елемент #inner зміщується в бік, але не туди, куди ви могли б очікувати. Він знаходиться на відстані 1em не від лівої межі свого предка, а на відстані 1em від лівого краю вікна!

Причина в тому, як пояснювалося вище, що елемент #inner не має позиціонованого предка, тому його охоплюючий блок є початковим осяжним блоком. Якщо визначити позицію відмінну від auto, то вона буде задана щодо відповідного краю охоплюючого блоку. Якщо задати left: 1em, то лівий край елемента #inner закінчиться на відстані 1em від лівого краю вікна.

  1.  Якщо ви хочете замість цього, щоб він був на відстані 1em від лівого краю його елемента предка, то необхідно зробити предка охоплюючим блоком. Для цього ми використовуємо тепер прийом, який згадувався раніше в статті – зробимо блок предок відносно позиційованим. Додайте наступний виділений рядок в правило #outer:

#outer {

margin: 5em;

border: 1px solid #f00;

height: 4em;

position: relative;

}

  1.  Збережіть і перезавантажте документ – і ось! Сірий прямокутник тепер знаходиться на відстані 1em від лівої межі елементу предка. Завдання position: relative у правилі #outer робить його позиційованим і задає як охоплюючий блок для всіх абсолютно позиційованих нащадків, які він міг би мати. Завдання left: 1em для елемента #inner тепер відраховується від лівого краю елемента #outer, а не від лівого краю вікна браузера.

Визначення розмірів

Абсолютно позиційовані елементи будуть стискатися, щоб відповідати своєму контенту, якщо не визначити їх розміри. Ширину можна визначити, задаючи властивості left і right, або задаючи властивість width. Висоту можна визначити, задаючи властивості top і bottom, або задаючи властивість height.

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

Для будь-якого абсолютно позиціонованого елемента значення відсотків для властивостей left, right і width визначаються відносно ширини охоплюючого блоку. Значення відсотків для властивостей top, bottom і height визначаються щодо висоти охоплюючого блоку.

Internet Explorer 6 і більш старі версії, а також Opera 8 і більш старі версії, сприймають це абсолютно неправильно і використовують замість цього розміри блоку предка. Давайте поекспериментуємо з іншим прикладом, щоб побачити, що це може мати велике значення.

  1.  Почнемо з визначення розмірів елемента #inner, використовуючи значення відсотків – зробіть наступні зміни у правилі #inner:

#inner {

width: 50%;

height: 50%;

background-color: #999;

position: absolute;

left: 1em;

}

  1.  Збережіть і перезавантажте, і ви побачите, що сірий прямокутник стане ширшим і коротшим (принаймні, якщо ви використовуєте сучасний браузер). Охоплюючий блок, як і раніше, буде #outer, так як він має position: relative. Ширина елемента #inner становить зараз половину #outer, а його висота половину висоти #outer.
  2.  Давайте зробимо вікно перегляду знову охоплюючим блоком, щоб побачити різницю! Зробіть такі зміни в #outer:

#outer {

margin: 5em;

border: 1px solid #f00;

height: 4em;

position: static;

}

  1.  Збережіть і перезавантажте документ – бачите різницю? Сірий бокс тепер має половину ширини і половину висоти вікна браузера.

Як можна бачити, знання охоплюючих блоків абсолютно важливе!

Третій вимір – z-індекс

Природно розглядати Web-сторінку двовимірною. Технологія поки не розвинулася в такій мірі, щоб 3D-дисплеї стали широко поширеними, тому ми повинні задовольнятися шириною і висотою й імітувати ефекти 3D. Але візуалізація CSS насправді відбувається в трьох вимірах! Це не означає, що можна змусити елемент повісити перед екраном – на жаль – але можна зробити кілька інших корисних речей з позиціонуванням елементів.

Двома основними осями на Web-сторінці є горизонтальна вісь X і вертикальна вісь Y. Початок координатної системи знаходиться у верхньому лівому куті вікна перегляду, тобто в цьому місці обидва значення X і Y рівні 0.

Але існує також вісь Z, яку можна уявити спрямованою перпендикулярно до поверхні монітора (або паперу під час друку). Великі значення Z вказують позицію “перед” меншими значеннями Z. Значення Z можуть бути також негативними, що вказує на становище “позаду” деякої точки прив’язки (я зараз поясню, що це за точка прив’язки).

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

Позиційовані елементи (включаючи відносно позиційовані елементи), зображуються в так званому контексті стека. Елементи в контексті стека мають одну точку прив’язки на осі Z. Докладніше про це нижче. Можна змінити позицію Z (звану також рівнем стека) позиціонованого елемента за допомогою властивості z-index. Це значення може бути цілим числом (яке може бути негативним) або одним з ключових слів auto або inherit. Значенням за замовчуванням є auto, яке означає, що елемент має такий же рівень стека, як і його предок.

Необхідно зазначити, що можна визначити позицію індексу тільки на осі Z. Неможливо змусити елемент з’явитися на відстані 19 пікселів або 5 сантиметрів перед іншим. Уявіть собі це як колоду карт: ви можете скласти карти стопкою (стеком) і вирішити, що хрестовий туз повинен бути вище бубнової трійки  – кожна карта має свій рівень стека, або Z-індекс.

Якщо Z-індекс визначається як позитивне ціле число, то ви привласнюєте йому рівень стека “перед” іншими елементами в тому ж контексті стека, які мають менший рівень стека. Z-індекс рівний 0 (нуль) означає те ж саме, що й auto, але є відмінність, до якої я скоро повернуся. Негативне ціле значення Z-індексу присвоює рівень стека “позаду” рівня стека предка.

Коли два елементи в одному контексті стека мають однаковий рівень стека, той, який з’являється пізніше у вихідному коді з’явиться поверх попереднього однорівневого елемента.

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

  1.  Фон і межі елементів, які формують контекст стека
  2.  Позиційовані нащадки з негативними рівнями стека
  3.  Нащадки блокового рівня в нормальному потоці
  4.  Плаваючі нащадки
  5.  Нащадки строкового рівня в нормальному потоці
  6.  Позиційовані нащадки з рівнем стека, заданим як auto або 0 (нуль)
  7.  Позиційовані нащадки з позитивними рівнями стека

Виділені позиції є елементами, рівень стека яких можна змінювати за допомогою властивості z-index.

Все це може бути досить складно уявити, тому давайте зробимо кілька практичних експериментів для ілюстрації Z-індексу.

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

<body>

<div id="outer">

<div id="inner""></div>

<div id="second"></div>

</div>

</body>

  1.  Потім необхідно відновити код CSS, так щоб #outer був охоплюючим блоком, і задати непроцентні розміри для #inner. Давайте зробимо також #outer трохи вище, щоб було більше простору для експерименту. Зробіть в правилах наступні зміни:

#outer {

margin: 5em;

border: 1px solid #f00;

height: 8em;

position: relative;

}

#inner {

width: 5em;

height: 5em;

background-color: #999;

position: absolute;

left: 1em;

}

  1.  Додайте також правило для елемента #second:

#second {

width: 5em;

height: 5em;

background-color: #00f;

position: absolute;

top: 1em;

left: 2em;

}

  1.  Збережіть і перезавантажте документ, і ви побачите яскраво синій бокс, який перекриває сірий бокс. Обидва бокси мають один рівень стека (auto, початкове значення, яке означає рівень стека 0), але синій бокс зображується перед сірим боксом, так як він з’являється пізніше у вихідному коді. Можна зробити так, щоб перший бокс виводився зверху, ставлячи для нього позитивний рівень стека. Необхідно поставити його просто більше 0 – немає ніякої необхідності використовувати такі значення як 10000. Додайте наступний рядок в правило #inner:

#inner {

width: 5em;

height: 5em;

background-color: #999;

position: absolute;

left: 1em;

z-index: 1;

}

  1.  Збережіть і перезавантажте, і тепер ви побачите, що сірий бокс виводиться зверху синього.

Локальні контексти стеків

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

Кожен елемент, z-індекс якого визначений як ціле число, створює новий, “локальний” контекст стека, в якому сам елемент має рівень стека 0. У цьому полягає різниця, про яку говорилося раніше між z-index: auto і z-index: 0. Перший з них не створює новий контекст стека, а другий створює.

Коли елемент створює локальний контекст стека, рівні стека його позиціонованих нащадків застосовуються тільки в цьому локальному контексті. Цим нащадкам можна змінити порядок розташування відносно один одного і щодо свого предка, але не щодо однорівневих вузлів предка. Це як ніби предок формує “клітину” навколо своїх нащадків, яку вони не можуть покинути. Нащадки можуть переміщатися вгору і вниз у своїй клітці, але не можуть вийти з клітки. Предок і його нащадки будуть формувати нероздільну єдність в контексті стека, в якому знаходиться предок.

Уявіть, що ви сортуєте фінансові документи, перш ніж передати їх бухгалтеру, який розраховує ваші податки, і ви складаєте один папір поверх іншого – щоб полегшити роботу бухгалтера, ви розкладаєте пов’язані документи до різних конвертів.

Локальний контекст стека аналогічний такому конверту. Він містить пов’язані елементи разом і не дозволяє іншим елементам з’явиться між ними. Можна відсортувати контент у кожному конверті потрібним чином, але цей порядок сортування застосовується тільки в цьому конверті, і не поширюється на стек паперів в цілому. Стек містить тепер суміш незв’язаних паперів (елементів з рівнем стека auto), і конвертів (елементів з цілочисловим рівнем стека). Конверти з позитивними рівнями стека лежать поверх незв’язаних паперів, у той час як конверти з негативними рівнями стека опиняться внизу пачки.

Кожного разу, коли ціле значення привласнюється властивості z-index елемента, створюється “конверт”, який містить цей елемент та його нащадків.

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

  1.  Почнемо з додавання деякого контенту в два внутрішніх елементи – додайте рядки в документ HTML:

<div id="inner">

<span></span>

</div>

<div id="second">

<span></span>

</div>

  1.  Додайте правило CSS, яке буде застосовуватися до обох цих елементів span:

span {

position: absolute;

top: 2em;

left: 2em;

width: 3em;

height: 3em;

}

Воно робить елементи span абсолютно позиціонованими і задає їх позиції й розміри. Хоча зачекайте секунду – елементи span є строковими – як можна визначити розміри для строкових елементів? Відповідь полягає в тому, що абсолютно позиційовані елементи, подібно плаваючим елементам, автоматично генерують блокові бокси.

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

  1.  Давайте тепер додамо трохи кольору в елементи span, щоб можна було бачити, де вони з’являються. Додайте наступні правила в таблицю стилів:

#inner span {

background-color: #ff0;

}

#second span {

background-color: #0ff;

}

  1.  Збережіть і перезавантажте документ, і ви повинні побачити жовтий квадрат у нижньому правому куті більший за розміром сірого квадрата, і блакитний квадрат у нижньому правому куті більший за розміром синього квадрата. Сірий і жовтий квадрати з’являться перед синім і блакитним квадратами, так як сірий квадрат має z-index: 1.
  2.  Але якщо нам потрібно, щоб блакитний квадрат був перед усіма іншими квадратами? Для цього потрібно тільки поставити для нього більш високий рівень стека, ніж у сірого квадрата. У дійсності досить задати йому такий же рівень стека, як і у сірого квадрата, так як блакитний квадрат з’являється в розмітці пізніше. Давайте перевіримо це – зробіть наступну зміну в коді CSS:

#second span {

background-color: #0ff;

z-index: 1;

}

  1.  Збережіть і перезавантажте документ. Якщо використовуваний браузер правильно підтримує рекомендацію CSS, то блакитний квадрат має тепер бути попереду.

Сірий квадрат має властивість z-index: 1, що означає, що він створює локальний контекст стека. Іншими словами, ви створили один з таких “конвертів” і помістили всередину сірий квадрат і його жовтий квадрат нащадків.

Заплуталися? Наступний експеримент має зробити все зрозуміліше.

  1.  Задайте великий рівень стека для жовтого квадрата, щоб вивести його вперед – зробіть наступні зміни в коді CSS:

#inner span {

background-color: #ff0;

z-index: 4;

}

  1.  Якщо зберегти і перезавантажити документ, ви побачите … взагалі ніяких змін! Рівень стека, який був визначений для жовтого квадрата, застосовується в локальному контексті стека, створеному сірим квадратом – жовтий квадрат знаходиться в конверті разом зі своїм сірим предком. Можна було б перемістити блакитний квадрат вперед, так як його предок (синій квадрат) не створює локальний контекст стека – він має властивість z-index: auto, яка неявно мається на увазі . Синій квадрат є вільним документом у стеці. Жовтий і блакитний квадрати знаходяться в дійсності в невеликих конвертах самі по собі (вони мають цілочисельний рівень стека і створюють свої власні локальні контексти стеків)
  2.  Якщо синій квадрат створює локальний контекст стека, ви не зможете перемістити блакитний квадрат вперед, якщо не перемістити також вперед його предка (синій квадрат). Давайте спробуємо це зробити – зробіть наступні зміни в коді CSS:

#inner {

...

z-index: 2;

}

#second {

...

z-index: 1;

}

#second span {

...

z-index: 3;

}

  1.  Збережіть і перезавантажте. Тепер сірий квадрат і синій квадрат створюють локальні контексти стеків, надаючи нам два конверти. Внизу стека знаходиться конверт з рівнем стека 1, що містить два внутрішніх конверта (синій квадрат і блакитний квадрат). Вгорі стека знаходиться конверт з рівнем стека 2, що містить два внутрішніх конверта (сірий квадрат і жовтий квадрат). У першому конверті синій квадрат має локальний рівень стека 0, і тому з’являється позаду блакитного квадрата, який має локальний рівень стека 3. У другому конверті сірий квадрат має локальний рівень стека 0, і тому з’явиться позаду жовтого квадрата з локальним рівнем стека 4. Мал.1 показує чотири бокси і два контексти локального стека по сторонах, уздовж осі Z.

Мал.1. Ілюстрація різних контекстів стеків.

Елементи, що з’являються всередині “2″ завжди будуть з’являтися перед усіма елементами всередині “1″. Потім всередині кожного контексту стека елементи з великим значенням z-index з’являться перед елементами з меншим значенням z-index. Якщо два елементи мають однакове значення z-index, то елемент, який з’являється в розмітці пізніше буде знаходитися попереду

Ця частина була, ймовірно, досить складною, особливо якщо ви новачок в CSS. Важливий момент полягає в тому, що необхідно знати контексти стеків, якщо потрібно змінити рівні стека різних елементів. Якщо елемент належить локальному контексту стека, то можна змінити тільки його позицію вздовж осі Z в локальному контексті. Елемент в одному локальному контексті стека не може опинитися між двома елементами в іншому локальному контексті стека.

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

  1.  Фіксоване позиціонування

Елемент з заданою властивістю position: fixed фіксується щодо області перегляду. Він залишається там, де є, навіть якщо документ прокручується. Для media = "print" фіксований елемент буде повторюватися на кожній друкованій сторінці.

Відзначимо, що Internet Explorer версії 6 і його більш старі версії взагалі не підтримують фіксоване позиціонування. При використанні одного з цих браузерів ви не зможете побачити результати прикладів з цього розділу.

У той час як позиція і розміри елемента з position: absolute визначаються щодо його охоплюючого блоку, позиція і розміри елемента з position: fixed завжди визначаються щодо початкового охоплюючого блоку. Це звичайно буде область перегляду: вікно браузера або бокс сторінки паперу.

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

  1.  Зробіть такі зміни в коді CSS:

#inner {

width: 5em;

height: 5em;

background-color: #999;

top: 1em;position: fixed;

left: 1em;

}

#second

width: 5em;

height: 150em;

background-color: #00f;

position: absolute;

top: 1em;

left: 2em;

}

  1.  Збережіть і перезавантажте документ. Якщо вертикальна смуга прокрутки не з’явиться, збільште значення height для #second. (Який, однак, повинен бути величезний монітор?)

Високий синій елемент розширюється нижче вікна. Прокрутіть сторінку вниз і утримуйте погляд на сірому квадраті у верхньому лівому кутку. #inner тепер зафіксовано в позиції 1em від верха вікна і 1em від лівої сторони, тому при прокрутці сірий бокс залишається в одному і тому ж місці на екрані.

  1.  Резюме

Абсолютно позиційовані елементи повністю видаляються з потоку документа. Вони будуть перекривати інший контент, якщо не виділити для них простір. Якщо всі елементи нащадки контейнера абсолютно позиціоновані, висота предка буде схлопуватися до нуля.

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

Елементи з фіксованим позиціонуванням фіксуються щодо області перегляду – область перегляду завжди є їх охоплюючим блоком. Вони завжди виводяться в одному й тому ж місці у вікні браузера, коли проглядаються на екрані; при друці вони будуть з’являтися на кожній сторінці.

Позиції кожного краю абсолютно позиціонованого елемента можна визначити за допомогою властивостей top, right, bottom і left. Значення кожної властивості визначає відстань від цього краю до відповідного краю охоплюючого блоку елемента.

Всі позиційовані елементи зображаються на деякому рівні стека в контексті стека. Можна змінити рівень стека позиціонованого елемента за допомогою властивості z-index. Коли z-index визначено як цілочисельне значення, елемент створює локальний контекст стека для своїх нащадків.

  1.  Контрольні запитання
  •  Відмініть зміни в прикладі з фіксованим позиціонуванням і потім змініть порядок стека чотирьох абсолютно позиційованих квадратів, так щоб сірий квадрат був внизу, а потім йшли синій, жовтий і блакитний квадрати в даному порядку. (Порада: видаліть всі оголошення z-index і почніть спочатку.)
  •  Перемістіть жовтий квадрат вгору і вправо, задаючи top:-1em і left: 8em. Потім зробіть так, щоб він з’явився позаду елемента #outer, щоб червоний кордон перетинав жовтий квадрат.
  •  Повторіть трьохстовцеве компонування використовуючи замість цього абсолютне позиціонування. Так як буде неможливо створити нижній колонтитул у всю ширину, можна видалити елемент #footer, але більше нічого змінювати в розмітці не дозволяється (крім посилання на таблицю стилів).
  •  Модифікуйте компонування з попередньої вправи, щоб навігація використовувала фіксоване позиціонування. Потрібно буде видалити автоматичні горизонтальні поля на елементі body, щоб це було можливо. Додайте досить контенту в основний стовпець і/або бічну панель, щоб з’явилася панель прокрутки, щоб можна було перевірити, що все працює.


 

А также другие работы, которые могут Вас заинтересовать

44146. Определение потребной мощности холодильного оборудования РПС 821.5 KB
  Наибольшее распространение для холодильной обработки пищевых продуктов получили паровые компрессионные холодильные машины с одноступенчатым и двухступенчатым сжатием паров холодильного агента. Для построения теоретического и действительного циклов работы паровой холодильной машины необходимо выбрать
44147. Разработка визуальной системы обучения основам алгоритмизации и программирования курсантов высших военных учебных заведений 2.9 MB
  Целью изучения учебной дисциплины «Информатика и программирование» является приобретение курсантами базовых знаний и практических навыков, позволяющих эффективно применять средства автоматизации управления внутренними войсками для решения служебно-боевых задач в сфере военно-профессиональной деятельности по специальности
44148. Исследование физической подготовленности легкоатлетов групп начальной подготовки 254.5 KB
  Средства и методы обучения и тренировки легкоатлетов Структура и содержание спортивной тренировки на этапе начальной подготовки Оценить динамику физической подготовленности занимающихся в секции легкой атлетики в годичном цикле тренировки. Систематичность последовательность и постепенность лежат в основе планирования спортивной тренировки в легкой атлетике и осуществляются в недельном месячном годичном тренировочных циклах предполагая систематическое последовательное но постепенное повышение тренировочных нагрузок...
44149. Направления повышения экономической безопасности предприятия ООО «Дорожно-строительное предприятие» 648.5 KB
  Теоретико-методические положения обеспечения экономической безопасности предприятия. Сущность экономических подходов к повышению уровня безопасности предприятия. Методические положения по определению уровня экономической безопасности предприятия и факторов на нее влияющих. Методы повышения экономической безопасности предприятия.
44150. Реклама вентиляционных систем стандартные и нестандартные решения (на примере компании «Формик») 1.51 MB
  Большинство современных рынков подразделяют на множество сегментов. Многие товары и услуги имеют узкую нишу и ограниченный круг потребителей, охватить который с помощью традиционной рекламы сложно и затратно. Все равно, что бить из пушки по воробьям.
44151. Аграрная политика государства в условиях рынка 695.5 KB
  В связи с этим появились суждения о том что система колхозов способствовала развалу сельского хозяйства и лишь с ликвидацией такой системы наступит всеобщее благоденствие. Поэтому налицо отчуждение работника сельского хозяйства от земли спад интереса к сельскохозяйственному труду многие деревни опустели. Трудности развития сельского хозяйства и других отраслей АПК как показывают реформы с каждым годом только увеличиваются. Учитывая данные обстоятельства решение проблемы продовольственной безопасности страны должно представлять собой...
44152. Техническое обслуживание и ремонт электропривода ЭПЦ-1000 Д12УХЛ 340.1 KB
  Предназначен для управления рабочими органами запорной арматуры технологических и магистральных трубопроводов на объектах МН: линейной части нефтепровода, НПС (ЛПДС), нефтебаз, пунктов слива-налива, резервуарных парков, морских терминалов, а также регулирующих органов в системах автоматического регулирования давления на НПС (ЛПДС) и линейной части, трубопроводной запорной арматуры систем пожаротушения, водоснабжения и канализации, водяного охлаждения, клапанов систем автоматики отопления и вентиляции
44153. РАЗРАБОТКА МАРКЕТИНГОВОГО ПЛАНА УЧАСТИЯ В ВЫСТАВКЕ (НА ПРИМЕРЕ ООО «СЦ «СЭР», Г. ЛЕНИНСК-КУЗНЕЦКИЙ) 1.2 MB
  Целью работы является разработка плана участия в выставке для совершенствования деятельности предприятия на примере ООО Сервисный Центр СибЭнергоРесурс. Четвертая глава направлена на разработку маркетингового плана участия в выставке для ООО Сервисный Центр СибЭнергоРесурс.3 Разработка маркетингового плана участия в выставке.
44154. Инфаркт миокарда. Реанимационный этап лечения 675.5 KB
  Каждая миокардиальная клетка состоит из миофибрилл, которые состоят из длинных цепей индивидуальных саркомеров — основных сократительных единиц клетки. Каждый саркомер состоит из нитевидных структур — перекрывающихся филаментов, образованных сократительными белками — актином и миозином.