Wie löst man Z-Index-Probleme mit Divs in Internet Explorer 6 und 7?

Internet Explorer 6 und 7 Z-Index-Problem

Problem:

Auf der Website http://madisonlane.businesscatalyst.com, es tritt ein Problem auf, bei dem sich div#sign-post nicht überlappt div#bottom, obwohl es darüber angezeigt werden sollte. Darüber hinaus werden in IE6 oben in div#bottom zusätzliche 198 Pixel angezeigt.

Z-Index und Stapelkontexte verstehen

Die Z-Index-Eigenschaft bestimmt die Schichtung von Elementen in HTML. In IE6 und IE7 unterscheidet sich das Standardverhalten jedoch geringfügig.

Laut Spezifikation erstellen Elemente mit einem nicht standardmäßigen Positionsattribut einen neuen „Stapelkontext“. Elemente innerhalb desselben Stapelkontexts werden anhand ihrer Z-Index-Werte verglichen und das Element mit dem höheren Wert erscheint oben.

Im Fall der angegebenen Website tritt das Problem auf, weil IE6 und IE7 Stapeln erstellen Kontexte sowohl für div#sign-post als auch für div#bottom, auch wenn ihnen explizite Z-Indexwerte fehlen. Daher überschreibt die Dokumentreihenfolge die gewünschte Z-Index-Reihenfolge.

Lösung:

Um das Problem zu beheben, muss ein übergeordnetes Element erstellt werden, das als fungiert das „Stapel-Elternteil“ sowohl für div#sign-post als auch für div#bottom. Dieses Element sollte ein nicht standardmäßiges Positionsattribut (z. B. relativ oder absolut) und einen expliziten Z-Indexwert haben.

Auf diese Weise stellen Sie sicher, dass die Reihenfolge von div#sign-post und div#bottom stimmt wird innerhalb desselben Stapelkontexts bestimmt und die gewünschte Z-Index-Priorität wird festgelegt.

Das obige ist der detaillierte Inhalt vonWie löst man Z-Index-Probleme mit Divs in Internet Explorer 6 und 7?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!