Linuchs: z-index:1 liegt über z-index:2

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

  1. 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

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Schwan und Schwangerschaft.

    1. 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?

      http://wiki.selfhtml.org/wiki/Z-index

      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

      1. Om nah hoo pez nyeetz, Linuchs!

        Direkt gefragt: Wie löse ich mein Problem?

        kein z-index verwenden.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rat und Ratsche.

        1. 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

          1. 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

          2. Om nah hoo pez nyeetz, Linuchs!

            Dein #middle überlagert links Links.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Frau und fraunhofersche Linien.

  2. 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