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-индекса
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Работает | Работает | Работает | Работает | 4+ | 4+ | Работает |