div ( z-index: 1; /* integer */ )z-indexВластивість в CSS контролює вертикальний порядок розташування елементів , які перекривають один одного. Як і в, який із них здається так, ніби він вам фізично ближчий. z-indexвпливає лише на елементи, які мають значення позиції, відмінну від static(за замовчуванням).
Елементи можуть перекриватися з різних причин, наприклад, відносне позиціонування підштовхує його до чогось іншого. Негативне поле перетягнуло елемент на інший. Абсолютно розташовані елементи перекривають один одного. Різні причини.
Без будь-якого z-indexзначення елементи складаються в тому порядку, в якому вони відображаються в DOM (найнижчий, що знаходиться на тому ж рівні ієрархії, з’являється зверху). Елементи з нестатичним позиціонуванням завжди відображатимуться поверх елементів із статичним позиціонуванням за замовчуванням.
Також зауважте, що гніздування відіграє велику роль. Якщо елемент B сидить поверх елемента A, дочірній елемент елемента A ніколи не може бути вище елемента B.
Зверніть увагу, що у старшій версії IE цей контекст трохи зіпсований. Ось виправлення jQuery для цього.
Більше інформації
- Скрінкаст: Як працює z-index
- Документи MDN
- Вичерпна стаття: Розуміння z-індексу
- Раціональні значення z-індексу
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Працює | Працює | Працює | Працює | 4+ | 4+ | Працює |