div ( z-index: 1; /* integer */ )Die z-indexEigenschaft in CSS steuert die vertikale Stapelreihenfolge von Elementen, die sich überlappen. Wie in, welches erscheint, als ob es physisch näher bei Ihnen ist. z-indexBetrifft nur Elemente, die einen anderen Positionswert als static(Standard) haben.
Elemente können sich aus verschiedenen Gründen überlappen, z. B. hat die relative Positionierung sie über etwas anderes bewegt. Ein negativer Rand hat das Element über ein anderes gezogen. Absolut positionierte Elemente überlappen sich. Alle möglichen Gründe.
Ohne z-indexWert werden Elemente in der Reihenfolge gestapelt, in der sie im DOM angezeigt werden (das niedrigste Element auf derselben Hierarchieebene wird oben angezeigt). Elemente mit nicht statischer Positionierung werden immer über Elementen mit statischer Standardpositionierung angezeigt.
Beachten Sie auch, dass das Verschachteln eine große Rolle spielt. Wenn ein Element B über Element A liegt, kann ein untergeordnetes Element von Element A niemals höher als Element B sein.
Beachten Sie, dass ältere Versionen des IE dieses Kontextmaterial etwas durcheinander bringen. Hier ist ein jQuery-Fix dafür.
Mehr Informationen
- Screencast: Wie Z-Index funktioniert
- MDN Docs
- Umfassender Artikel: Grundlegendes zum Z-Index
- Rationale Z-Index-Werte
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | 4+ | 4+ | Funktioniert |