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