Негативний z-index. Властивість z-index: детальний огляд. z-index працює лише з позиціонованими елементами
Проблема z-index у тому, що багато хто просто не розуміє, як він працює.
Все, описане нижче, є специфікації W3C. На жаль, не всі читають.
Опис проблеми:
Отже, нехай ми маємо HTML код, що складається з 3 елементів.Кожен із них у собі містить по одному. А кожен, у свою чергу, має свій фон: червоний, зелений та синій відповідно. Плюс до всього, кожен позиціонований абсолютно лівого верхнього краю документа таким чином, що він трохи перекриває наступний за ним. Перший має z-index , що дорівнює 1, в інших двох z-index не заданий.
Нижче представлений HTML-код з базовим css оформленням.
.red, .green, .blue ( position: absolute; ) .red ( background: red; z-index: 1; ) .green ( background: green; ) .blue ( background: blue; )
Приклад на jsfiddle
Завдання:зробити так, щоб червоний був позаду синього та зеленого, при цьому не порушуючи жодного з наступних правил:
- Не можна змінювати розмітку HTML
- Не можна змінювати/додавати z-index до елементів
- Не можна змінювати/додавати позиціонування до елементів
Рішення:
Рішення полягає в тому, щоб додати прозорість трохи менше одиниці першому (батьку червоного).Ось css, що ілюструє це:
div:first-child ( opacity: .99; )
Хм, щось тут негаразд. До чого тут взагалі прозорість? Як вона може впливати на порядок перекриття елементів? Ви думаєте так само? Ласкаво просимо до клубу!
Сподіваюся, у другій частині статті все стане на свої місця.
Порядок накладання елементів:
Z-index здається дуже простим: що значення більше, то ближче до нас буде елемент, тобто. елемент з z-index 5 буде перекривати собою елемент з z-index 2, чи не так? Насправді ні.Це і проблема z-index. Все здається настільки очевидним, що більшість розробників не приділяють достатньо часу вивчення цього питання.
Будь-який елемент у HTML документі може бути або на передньому або задньому плані. Це відомо всім. Правила, що задають цей порядок, чітко описані в специфікації, але, як я вже говорив вище, не всі повною мірою їх розуміють.
Якщо властивості z-index та позиціонування не задані явно, все просто: порядок накладання дорівнює порядку прямування елементів у HTML. (Насправді все трохи складніше, але поки ви не будете використовувати негативні значення відступів для перекриття малих елементів, ви не стикатиметеся з крайніми випадками)
Якщо ви явно вказуєте позиціонування елементам (та їх дітям), такі елементи перекриватимуть собою елементи без явно заданої властивості позиціонування. (Говорячи «явно вказуєте позиціонування» – я маю на увазі будь-яке значення, крім статичного, наприклад абсолютне, або відносне).
І, нарешті, випадок, коли z-index заданий. Для початку, цілком природно припускати, що елементи з більшим z-index будуть перебувати вище елементів з меншим z-index, а будь-який елемент із встановленим z-index буде вище елемента без встановленого z-index, але це не так. По-перше, z-index враховується лише з явно позиціонованих елементах. Якщо ви спробуєте встановити z-index на не позиціонований елемент, нічого не станеться. По-друге, значення z-index можуть створювати контексти накладання. Хм, все стало набагато складніше, чи не так?
Контекст накладання
Елементи із загальними батьками, що переміщаються на передній або задній план, разом відомі як контекст накладання. Розуміння контексту накладання є ключем до розуміння z-index та порядку накладання елементів.Кожен контекст накладання має свій кореневий елемент у структурі HTML. У момент формування нового контексту на елементі всі дочірні елементи так само потрапляють у цей контекст і займають своє місце в порядку накладання. Якщо елемент розташовується в самому низу одного контексту накладання, то ніяким мислимим і немислимим чином не вийде відобразити його над іншим елементом у сусідньому контексті накладання, що знаходиться вище за ієрархією, навіть із встановленим z-index рівним мільйону.
Новий контекст може бути сформований у таких випадках:
- Якщо елемент – кореневий елемент документа (елемент)
Якщо елемент позиціонований не статично і його значення z-index не дорівнює auto
Якщо елемент має прозорість менше ніж 1
Здрастуйте, шановні читачі блогу сайт! Іноді я дозволяю собі додавати матеріали до скарбнички і сьогодні ми поговоримо про властивість z-index, яка впливає на позиціонування елементів на веб-сторінці.
Треба розуміти, що це правило працює лише щодо позиціонованих тегів, котрим прописано властивість . Тобто для стандартного потоку документа (де позиціонування не задано або його параметр визначено як static) воно не діятиме. Нижче я продемонструю роботу z-index на конкретному прикладі.
Як z-index визначає позиції елемента
Отже, для кожного елемента CSS знаходиться своє місце на веб-сторінці відповідно до прописаних для нього стилів. Розташування всіх блоків щодо один одного визначається за допомогою системи координат.
У загальному випадку точка відліку знаходиться у верхньому лівому куті області перегляду (вікна браузера). При цьому осі X та Y визначають місце розташування елементів у площині екрана монітора. А ось вісь Z, як ви напевно здогадалися, дозволяє змоделювати вже просторову систему координат.
Вона розташована перпендикулярно до площини, утвореної X і Y, і спрямована прямо на нас. Зрозуміло, що точкою відліку по осі Z є нуль. У нульовій точці розташовані всі статичні елементи, котрим визначено властивість position static (нормальне позиціонування).
За умовчанням, якщо position зовсім не прописаний, то така ситуація абсолютно рівнозначна тій, начебто було вказано параметр static. У цьому випадку відображення всіх елементів HTML сторінки відбувається в стандартному потоці. Таким чином, position, як, наприклад, і float (у створенні плаваючих елементів в CSS інформація) дає можливість змінювати звичайний варіант черговості для вирішення спеціальних завдань верстки.
Незважаючи на те, що для статичних веб-елементів значення z дорівнює нулю, тобто вони розташовуються в площині X-Y, для них визначені правила в тому випадку, якщо вони починають наїжджати один на одного.
Основне правило свідчить: веб-елемент, що визначається тегом, який розташований нижче в HTML коді сторінки, буде ближче до нас. Тобто він перекриватиме зверху блок, код якого знаходиться вище.
І це явно позиціоновані (динамічні) елементи (зі значеннями relative, absolute, fixed) перебувають вище статичних. У відносинах між динамічними вебелементами діятиме той самий закон: той, що розташований нижче в коді, знаходиться ближче до нас (вище за інших).
Ось тут і може сказати вирішальне слово властивість z-index. Чим більше значення в числовому виразі, тим вище буде відповідний елемент вебсторінки. Але все це працює, як я вже сказав, тільки щодо елементів з абсолютним (absolute), відносним (relative) чи фіксованим (fixed) позиціонуванням. Синтаксис параметрів z-index є таким:
Z-index: число | auto | inherit
Числові значення можуть бути будь-якими: як негативними, так і позитивними, включаючи нуль. Параметр auto визначає автоматичний порядок розташування веб-елементів відповідно до їх черговості в коді HTML, враховуючи приналежність до батька. Значення inherit показує, що z-index у батьківських.
Тепер настав час направити наші дослідження в практичне русло, щоб підтвердити теоретичні викладки. Я візьму для прикладу три щодо позиціонованих (із зазначеною властивістю position: relative). Для наочності пропишу для кожного відтінок кольору, рамку, а також вкажу відступи зліва (left) і зверху (top), ширину (width) і висоту (height):
На веб-сторінці після інтерпретації HTML коду браузером ці три блоки виглядатимуть так:
Зверніть увагу, що контейнери розташовуються в повній відповідності з озвученим вище правилом: нижній синій перекриває червоний, що знаходиться трохи вище, і той, у свою чергу, знаходиться ще вище зелений. А тепер додамо властивість z-index зі значенням 1 червоному блоку:
Картина зміниться:
Як бачимо, отримує перевагу червоний контейнер і він тепер знаходиться вище за інші. Далі спробуємо додати z-index вже зеленого блоку, але вже зі значенням 2:
Результат буде таким:
Цілком очевидно, що тепер вище за інших знаходиться зелений контейнер, який отримав найбільше значення z-index. Таким чином, всі наведені спочатку міркування повністю підтверджені практичними дослідами. Головне пам'ятати, що властивість z-index працює тільки з явно позиціонованими веб-елементами.
The z-index CSS властивість клацнути на z-order positioned element і його descendants or flex items. Перевірте елементи з великою z-index cover those with smaller one.
Source для цього interactive example is stored in GitHub repository. Якщо ви знайдете, щоб розширити проектні приклади, повторити clone https://github.com/mdn/interactive-examples і виконати додаткові запити.
Для positioned box (that is, one with any position other than static), the z-index property specifies:
- Станок рівень box в поточному stacking context .
- Усім box establishes a local stacking context.
Syntax
/* Keyword value */ z-index: auto; /*Z-index property is specified as either the keyword or an .
Values
autoУ box does no established новий local stacking context. Значок рівня generated box в поточному stacking context is the same as its parent"s box.Formal syntax
auto CSS data type is a special type ofExamples
HTML
CSS
.dashed-box ( position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; ) .gold-box ( position: absolute; z-index: 3 /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; ) .green-box ( position: absolute; z-index : 2; /* put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%;Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions Визначення " animation behavior for z-index " в тому specification. |
Working Draft | Defines z-index як animatable. |
| CSS Level 2 (Revision 1) Визначення "z-index" в цій specification. |
Recommendation | Initial definition |
| Initial value | auto |
|---|---|
| Applies to | positioned elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | an CSS data typ є interpolated via integer discrete steps. Спектр дає змогу, якщо вони були реальні, floating-point numbers and discrete value is obtained using the floor function.">integer |
| Canonical order | unique non-ambiguous order defined by the formal grammar |
| Creates stacking context | yes |
Browser compatibility
Компактність таблиці в цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data і пишуть.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
| z-index | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 4 | Safari Full support 1 | ||||||
| Negative values | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3 | IE Full support 4 | Opera Full support 4 | Safari Full support 1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Більшість CSS властивостей прості розуміння. Найчастіше застосування будь-якого з них до елемента розмітки дає негайний результат - варто лише оновити сторінку, як видно ефект застосування. Однак, є деякі властивості, які складніші і працюватимуть лише у разі певних обставин.
Властивість z-index відноситься до другої групи, яка безсумнівно викликає більше сум'яття, ніж будь-яке інше. За іронією, однак, при повному розумінні того, що таке z-index, він дуже простий у використанні і часто є ефективним способом подолання багатьох проблем макета.
У цій статті ми розглянемо, що таке z-index , які є проблеми в його розумінні, а також обговоримо деякі приклади його використання. Також розглянемо різницю його обробки браузерами, особливо у попередніх версіях Internet Explorer та FireFox.
То що це за властивість?
Властивість z-index визначає рівень розміщення у стеку, глибини html-елемента. "Рівень глибини" означає позицію елемента по осі Z (як перпендикулярну до осей X і Y екрану). Чим більше значення z-index, тим елемент буде вищим.
Природне розташування елементів
На сторінці звичайне розміщення елементів (я маю на увазі розташування вздовж осі Z) визначається кількома факторами. Нижче наведено список цих факторів, починаючи з найнижчих елементів. У цьому списку мається на увазі, що жодному з елементів явно не надається властивість z-index .
- Фон та межі елемента, що визначає контекст стека.
- Елементи з негативним контекстом стека, як відображення.
- Непозиціоновані (position: static), а також без встановленої властивості float (float: none) блокові елементи (display: block) у порядку відображення.
- Непозиціоновані, із встановленою властивістю float , блокові елементи, в порядку відображення.
- Рядкові (inline) елементи у порядку відображення.
- Елементи з встановленим властивістю position , як відображення.
Коректне застосування властивості z-index може змінити природне розташування в стеку.
Звичайно, порядок елементів у стеку не очевидний, допоки не потрібно відобразити елементи один над одним. Тому, щоб побачити звичайний порядок елементів, на прикладі нижче застосовані зовнішні відступи (margin).
У цих елементів різні кольори фону та меж, а останні два зміщені за рахунок встановленої негативної властивості margin. Таким чином видно природне розміщення елементів, кожен наступний знаходиться "вище" за попередній. У цих елементів встановлено властивість z-index , їх порядок розміщення в стеку є природним.
Де можуть бути проблеми?
Давайте розглянемо найпопулярнішу проблему у розробників-початківців. Справа в тому, що властивість z-index працює тільки з елементами, для яких властивість position встановлена в absolute, fixed або relative.
Щоб продемонструвати це, виведемо ті самі три елементи, але зі встановленою властивістю z-index , щоб спробувати змінити порядок розташування вздовж осі Z.
Встановимо сірому елементу z-index рівним 9999, синьому – 500, а коричневому – 1. Логічно очікувати, що порядок зміниться. Але не в цьому випадку, оскільки властивість position за умовчанням дорівнює static.
Встановимо властивість position у relative та подивимося що вийшло:
А ось тепер у нас вийшов очікуваний результат. Порядок елементів змінився, сірий елемент знаходиться над усіма, а коричневий у низу.
Синтаксис
Властивість z-index впливає як на блокові елементи, так і на малі (inline). Значенням може бути позитивне чи негативне число, або значення за промовчанням - auto . Значення за умовчанням означає, що елемент знаходиться на тому ж рівні, як і його батько.
Нижче наведено CSS для третього прикладу, де властивість z-index застосовується коректно:
#grey_box ( width: 200px; height: 200px; border: solid 1px #ccc; background: #ddd; position: relative; z-index: 9999; ) #blue_box ( width: 200px; height: 200px; border: 4a7497; background: #8daac3; position: relative; z-index: 500; ) #gold_box (width: 200px; height: 200px; border: solid 1px #8b6125; background: #ba945d; ;)
І знову повторюся, спеціально для новачків у CSS: властивість z-index не працюватиме, доки ви не встановите властивість position.
Використання в javaScript
Ви можете вплинути на властивість z-index динамічно, використовуючи JavaScript. Синтаксис схожий на звичайний для більшості CSS властивостей, з використанням camel-нотації для заміни дефісу у властивостях CSS.
Var myElement = document.getElementById("gold_box"); myElement.style.position = "relative"; myElement.style.zIndex = "9999";
Некоректна реалізація в IE та FireFox
У деяких випадках, IE6, IE7 і FireFox 2, зустрічається неправильна реалізація властивості z-index .
Елемент select в IE6
В Internet Explorer 6, елемент select є windows-контролем, тому він завжди відображається поверх всіх елементів, ігноруючи звичайний порядок розміщення, а також властивості position і z-index . Проблема показана на малюнку нижче:
Елемент select знаходиться в документі першим, його властивість z-index дорівнює 1, а position встановлений в relative. Div виводиться після select, а його z-index дорівнює "9999". Виходячи з усього цього, div повинен перебувати над select , як це відбувається в інших браузерах:
Choose Year - 2009 2010 2011
Якщо ви переглядаєте цю статтю не в IE6, ви побачите, що div розташований вище select .
Ця помилка IE6 є великою проблемою для випадаючих меню, коли вони повинні перекривати елемент select . Рішенням може бути використання JavaScript для того, щоб тимчасово приховати select -и, а потім, після зникнення меню, показати знову. Іншим рішенням може бути використання iframe.
Позиціоновані батьки в IE6/IE7
Internet Explorer версій 6 і 7 некоректно скидають контекст стека щодо найближчого позиціонованого батька. Щоб продемонструвати цю помилку, ми знову відобразимо два div-а. Але цього разу ми обернемо перший із них у позиціонований елемент.
Сірий елемент z-index дорівнює 9999, синій - 1, обидва елементи позиціоновані. Тому при коректній реалізації сірий елемент відобразиться поверх синього.
Якщо ви відкриєте цю сторінку в IE6 або IE7, ви побачите, що синій елемент перекриває сірий. Це відбувається через те, що сірий елемент обернуть ще один div , якому position встановлений в relative .
Обидва браузери "скидають" контекст стека щодо позиціонованих елементах, хоча й не повинні цього робити. У сірого елемента z-index більше, ніж у синього, тому він має відображатись вище. З рештою браузерів такої проблеми немає.
Негативні значення у FireFox 2
У FireFox 2 елементи з негативним z-index знаходяться під контекстом стека, замість того, щоб бути над фоном і межами елемента, який формує контекст стека. Приклад ви можете побачити на зображенні:
Нижче представлена html-версія
Як бачите, фон сірого елемента (що формує контекст стека) знаходиться під синім, а текст (який є inline-елементом у сірому елементі) знаходиться над ним, що відповідає правилам природного розташування, описаним вище.
Приклади використання
В оригінальній статті наведено багато прикладів використання якості. Чесно кажучи мені ліньки це перекладати, в основному - це скріншот, невеликий коментар та посилання. Якщо все-таки вам це дійсно треба, то пишіть, виділю час.
коротка інформація
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Будь-які позиціоновані елементи на веб-сторінці можуть накладатися один на одного в певному порядку, імітуючи цим третій вимір, перпендикулярний екрану. Кожен елемент може перебувати як нижче, так і вище за інші об'єкти веб-сторінки, їх розміщенням по z-осі та управляє z-index . Ця властивість працює тільки для елементів, у яких значення position задано як absolute, fixed або relative.
Синтаксис
z-index: число auto | inherit
Значення
Як значення використовуються цілі числа (позитивні, негативні та нуль). Чим більше значення, тим вище знаходиться елемент у порівнянні з тими елементами, які мають менше. При рівному значенні z-index на передньому плані знаходиться той елемент, який в коді HTML описаний нижче. Хоча специфікація дозволяє використовувати негативні значення z-index , але такі елементи не відображаються в браузері Firefox до версії 2.0 включно.
Крім числових значень застосовується auto — порядок елементів у разі будується автоматично, з їх становища у коді HTML і приналежності до батька, оскільки дочірні елементи мають той самий номер, що й батьківський елемент. Значення inherit показує, що воно успадковується у батька.
HTML5 CSS2.1 IE Cr Op Sa Fx
Шар 1 зверху
Шар 4 зверху
Результат цього прикладу показано на рис. 1.
Мал. 1. Застосування якості z-index
Об'єктна модель
document.getElementById("elementID ").style.zIndex
Браузери
Список, створений за допомогою тега
Internet Explorer до версії 7.0 включно не підтримує значення inherit та інтерпретує auto як 0.
У браузері Firefox до версії 2.0 включно негативне значення z-index має елемент нижче фону веб-сторінки та його контенту.