z-index:1 liegt über z-index:2
Linuchs
- css
Hallo,
hier spiele ich etwas rum: http://remso.eu/?zp=p580
Die roten Punkte auf der Landkarte sind die oberste Ebene einer Navigation, z-index:1
Wenn man einen roten Punkt auf der Landkarte übermaust (mouseover) wird die nächste Navi-Ebene eingeblendet, z-index:2.
Doch wenn man Bremen übermaust, deckt die zweite Ebene nicht Hamburg und Halle ab, sondern z-index:1 liegt hier über z-index:2 - wie kommt das?
Oder ist das nur ein Browser-Problem mit Opera? Lappi defekt, habe z.Z. keinen anderen Browser.
Hier die beiden CSS-Definitionen:
div.marker ul li {
position: absolute;
display: block;
z-index: 1;
}
div.marker ul li:hover ul {
display: block;
z-index: 2;
}
Linuchs
Om nah hoo pez nyeetz, Linuchs!
Doch wenn man Bremen übermaust, deckt die zweite Ebene nicht Hamburg und Halle ab, sondern z-index:1 liegt hier über z-index:2 - wie kommt das?
http://wiki.selfhtml.org/wiki/Z-index
Matthias
Om nah hoo pez nyeetz, Linuchs!
Ist das eine Beschimpfung? Polnisch kann ich nämlich nicht.
Ohh jo hoo, Matthias - Ohh jo hoo = ehrenwerter, ohh jo huu = ehrenloser ;-)
Doch wenn man Bremen übermaust, deckt die zweite Ebene nicht Hamburg und Halle ab, sondern z-index:1 liegt hier über z-index:2 - wie kommt das?
Okay, ich lese
"Per z-index angeordnete Elemente erzeugen für ihre Kindelemente einen eigenen Stapelkontext. Das bedeutet, dass die Eigenschaft nur auf die Kindelemente selbst wirkt."
Aber dass in der Navigationsleiste die zweite und dritte Ebene aufpoppt und andere Elemente überdeckt, ist doch nicht ungewöhnlich.
Was wäre denn, wenn die Brüder (gleiche Navi-Ebene) durch Verkleinerung des Viewports nicht neben- sondern untereinander geraten und ihre Kinder sozusagen die Onkelz - sprich: andere Eltern - überdecken müssen?
Direkt gefragt: Wie löse ich mein Problem?
Linuchs
Om nah hoo pez nyeetz, Linuchs!
Direkt gefragt: Wie löse ich mein Problem?
kein z-index verwenden.
Matthias
Hallo Matthias,
Direkt gefragt: Wie löse ich mein Problem?
kein z-index verwenden.
Wenn peter Recht hat, gilt dann dieses:
"Da alle den gleichen z-Index haben, werden sie in der Reihenfolge der Notierung übereinendergelegt."
Aber die Lösung ist ganz simpel, das hover-(Eltern-)Element wird nur für den hover-Vorgang angehoben, das klappt:
div.marker ul li:hover {
z-index: 2;
}
Linuchs
Aber die Lösung ist ganz simpel, das hover-(Eltern-)Element wird nur für den hover-Vorgang angehoben, das klappt:
Na also.
Geht doch!
gruß
peter
Om nah hoo pez nyeetz, Linuchs!
Dein #middle überlagert links Links.
Matthias
Hallo,
hier spiele ich etwas rum: http://remso.eu/?zp=p580
Die roten Punkte auf der Landkarte sind die oberste Ebene einer Navigation, z-index:1
Nein, nicht die roten Punkte(<img>) haben den z-Index 1, sondern die umgebenden <li>-Elemente.
Und zwar alle!
Da alle den gleichen z-Index haben, werden sie in der Reihenfolge der Notierung übereinendergelegt.
Wenn man einen roten Punkt auf der Landkarte übermaust (mouseover) wird die nächste Navi-Ebene eingeblendet, z-index:2.
Das passiert aber innerhalb des umgebenden <li>-Elements.
Der z-Index 2 zählt nur innerhalb des <li>-Elements.
Die Reihenfolge der <li>-Elemente bleibt unverändert.
gruß
peter