Rolf B: 3 Spalten im Footer responsive gestalten

Beitrag lesen

problematische Seite

Hallo Marcel,

@Rolf B du bist eine Granate

Das stimmt. Ich explodiere ziemlich schnell…

nur geht die Navigationsleiste unter den Bildern hindurch

Willkommen in der Welt der Stapel. Der Browser gliedert die HTML Elemente, die er anzeigen soll, in Stapelkontexte. Jeder Stapelkontext bildet eine Anzeigeebene. Welche Ebene unten oder oben ist, hängt am Wert der Eigenschaft z-index und…

…aber die verwende ich doch gar nicht

...und an der Reihenfolge im Dokument. Alle deine Stapelkontexte haben den z-index 0 (wenn ich keinen übersehen habe). Bei gleichem z-index werden die Kontexte in der Reihenfolge, wie sie im Dokument stehen, übereinander gelegt. Und darum liegt dein textonpic Section über der Navigation.

Mozilla weiß was über die Regeln, nach denen Stapelkontexte erstellt werden.

Die Navigation ist sticky, bekommt also ebenfalls einen Stapelkontext. Darum reagiert sie auf z-index. Setze ihn auf 1, und das Problem ist weg. Ältere Desktop-Browser legen bei sticky allerdings keinen Stapelkontext an (z.B. IE11, der kennt sticky gar nicht), was Dir hier aber egal sein kann. Wenn sticky ignoriert wird, hast Du das Problem eh nicht.

Rolf

--
sumpsi - posui - obstruxi