Z-index: Wie man verschachtelte Elemente erscheinen unterhalb der übergeordneten element

Diese Geige soll das Problem veranschaulichen:

http://jsfiddle.net/5sqxQ/2/

Möchte ich das sub-Menü erscheinen unterhalb der übergeordneten Menü. Dann war ich war auf der Suche zu erweitern, dies mit JavaScript zu schieben, das Menü von unten auf hover, der das übergeordnete li-element.

Nicht viel Aufhebens über das JavaScript kann aber nicht herausfinden, wie man style-Elemente, um die gewünschte Schichtung.

InformationsquelleAutor RyanP13 | 2011-06-27
  1. 4

    Nicht.

    Stattdessen machen die a werden die "Sign In" - button".

    Etwas wie dieses: http://jsfiddle.net/5sqxQ/15/

    InformationsquelleAutor thirtydot
  2. 12

    Es funktioniert nicht, weil Sie die Anwendung einer z-index, um das übergeordnete element, das macht das untergeordnete element, stack-relativ zu den anderen Elementen innerhalb der übergeordneten.

    Einmal weisen Sie einem element ein Wert für
    z-index (außer auto), dass
    element setzt seine eigenen lokalen
    stacking-context. Dies bedeutet, dass alle
    das element s Nachkommen haben
    eigene Anordnung, die relativ zum
    das Vorgänger-element.

    So, wenn die Eltern z-index: 9 und das Kind ist z-index: 8, es ist eine Art, wie die Zuordnung einer z-index von 9, 8

    Sehen der Artikel hier für eine bessere Erklärung.

    Wenn Sie entfernen Sie den z-index für die Eltern und setzen die Geschwister-element z-index: -1, das sollte funktionieren. Ich bin mir nicht sicher über alle Browser, aber es funktioniert in Chrome sowieso.

    Hier ist die aktualisiert fiddle

    Hoffe, das hilft.

    • z-index: -1 ist verführerisch, aber unangenehm. Siehe: jsfiddle.net/5sqxQ/17 - alles, was ich getan habe ist, fügen Sie den wrapper div mit einem hintergrund.
    • Vielen Dank für eine einfache Implementierung ging ich mit thirtydot die Antwort von unten. Ich wollte eigentlich nicht muck über mit -ve z-index. Wäre zu schmerzhaft.
    • Ich habe gerade aktualisiert meine Antwort mit dem richtigen link. Oops..
    • was ist unangenehm mit einem negativen z-index? Jede ganze Zahl ist vollkommen gültig. Und imho ist es eigentlich liest sich besser semantisch, wenn Sie möchten, etwas hinter seinen Eltern (Sie bewegen das Kind nach hinten, anstatt sich den Eltern vor)
    • Hat man sich bei der aktualisierten demo (jsfiddle.net/5sqxQ/17)? Der rote hintergrund vollständig bedeckt das element mit z-index: -1 ist unangenehme.
    • Vielen Dank an alle. Alles was ich meinte war, dass ich nicht sicher war, die cross-browser-Probleme für die -ve-z-index, so ging mit dem Weg des geringsten Widerstandes. Termine und alle, die...
    • ok, ich sehe, was Sie jetzt sagen - es ist eine fragile Lösung. unangenehme ist eine seltsame Wortwahl aber.
    • Ich soll gesagt haben, " z-index: -1 ist verführerisch, aber [es ist eine] unangenehm [Nebenwirkung]". Das ist es, was ich meinte, sowieso. Sorry für die Verwirrung.

    InformationsquelleAutor fearofawhackplanet
  3. 1

    Versuchen Sie, die Eltern und Geschwister Container position relative.
    Seine arbeitete für mich vor.

    • Und gesetzt den zindex des übergeordneten Containers als gut.
    • Manchmal musst du auch legen Sie die oben/Links/unten rechts Standorten, in der Regel nur oben und Links tun.
    InformationsquelleAutor Yogurt The Wise
  4. 1

    Blick auf die folgenden Regeln, wie Elemente gestapelt werden, und Sie können leicht kommen mit Ihrer eigenen Lösung.

    ex. Wie thirtydot sagte, geben Sie "Sign In" .users > li > a eine position, die relative oder absolute, und z-index: 1

    Die Stapelreihenfolge und stacking-context-Regeln unten sind von diesem link

    Anordnung innerhalb eines Stacking-Context

    Reihenfolge der Elemente:

    1. Den stacking-context root-element (die <html> element ist das einzige, stacking-Rahmen standardmäßig, aber kann jedes element einem root-element für einen stacking-context, siehe Regeln unten)
      • Sie können ein untergeordnetes element hinter einem root-stacking-context-element
    2. Positionierte Elemente (und Ihre Kinder) mit negativen z-index-Werte (höhere Werte gestapelt sind vor niedrigere Werte; Elemente mit dem gleichen Wert aufeinander gestapelt werden gemäß Darstellung in HTML)
    3. Nicht-positionierte Elemente (bestellt durch die Darstellung in HTML)
    4. Positionierte Elemente (und Ihre Kinder) mit einem z-index-Wert der auto (bestellt durch die Darstellung in HTML)
    5. Positionierte Elemente (und Ihre Kinder) mit positiver z-index-Werte (höhere Werte gestapelt sind vor niedrigere Werte; Elemente mit dem gleichen Wert aufeinander gestapelt werden gemäß Darstellung in HTML)

    , Wenn eine Stacking-Context bildet

    • Wenn ein element ist das root-element eines Dokumentes (der <html> element)
    • Wenn ein element ein position-Wert ungleich static und z-index anderen Wert als auto
    • Wenn ein element einen Wert für die Deckkraft weniger als 1
    • Einige neuere CSS-Eigenschaften erstellen Sie auch stapeln Kontexten. Dazu gehören: Transformationen, Filter, css-Regionen, die ausgelagerten Medien, und vielleicht die anderen. Sehen https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
    • Als eine Allgemeine Regel, es scheint, dass, wenn eine CSS-Eigenschaft erfordert das Rendern in eine offscreen-Kontext muss es schaffen, einen neuen stacking-context.
    InformationsquelleAutor Mr_Moneybags
Schreibe einen Kommentar