Ausblenden von div-hinter seinen Eltern?

<div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>

.content-wrapper relativ positioniert und enthält alle für den Inhalt der Seite (und nicht nur das popup).

.popup ist absolut positioniert.

.in der Nähe ist auch absolut positioniert.

Habe ich einige javascript zu verschieben, zu schließen, wenn der cursor in popup (so habe ich eine nette bar in der Nähe angezeigt, die für die Seite). Der beste Weg den ich gefunden habe, um dies zu tun ist, einfach zu bewegen mit jQuery animieren. Verbergen/anzeigen erstellt ein Stottern beeinflussen, auch .stop() nicht in der Lage war zu lösen. Mein problem ist bei dem Versuch, sich zu verstecken .knapp dahinter .popup. Egal welchen z-index ich für die beiden divs .in der Nähe wird dich nicht hinter .popup.

Ist es möglich ein absolut positioniertes div in einem anderen absolut positionierten div-sitzen hinter seinen Eltern, und wenn ja, wie?

  • ändern markup ist eine option?
  • Vielleicht, das popup über den Bildschirm bewegt (also, warum es absolut positioniert), so dass die Nähe innerhalb des popup war die einzige Lösung, die ich denken konnte. Wenn besser-markup arbeiten, dann bin ich bereit es zu versuchen.
InformationsquelleAutor Styphon | 2012-04-05
  1. 5

    Yep, verwenden Sie z-index: http://jsfiddle.net/tGd4Q/

    HTML:

    <div class="content-wrapper">
    <div class="popup">
        <div class="close">
        </div>
    </div>
</div>​

    CSS:

    .popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }​

    Diese funktioniert nicht mit IE7-standards wenn. Ich schlage vor, mit jQuery(oder anderen Rahmen deiner Wahl) zum ausblenden des div:

    $('.popup .close').hide();
    • Ich sehe, es funktioniert in jsfiddle, aber das funktioniert nicht in meinem code.
    • Es funktioniert, aber nur, wenn Sie haben .schließen Sie auf -1 gesetzt, und .popup überhaupt nicht festgelegt. Jede andere Kombination und es funktioniert nicht, komisch. Funktioniert für meine Zwecke aber, danke.
    InformationsquelleAutor Nick McCormack
  2. 2

    Stacking-Indizes sind die meisten der Zeit in Bezug auf Geschwister, so dass Sie nicht ein Kind dahinter die Eltern mit z-index.

    Hier ist etwas mehr Informationen darüber.

    Dies ist die Reihenfolge:

    1. Die Grenzen und hintergrund der aktuellen stacking-context
    2. Positioniert Nachkommen mit negativen z-index
    3. Nonpositioned block-level-Nachkommen ohne z-index-Eigenschaft definiert -- Absätze, Listen, Tabellen und so weiter
    4. Floating Nachkommen und Ihren Inhalt
    5. Nonpositioned inline content
    6. Positioniert Nachkommen ohne z-index, z-index: auto-oder z-index: 0
    7. Positioniert Nachkommen mit z-index größer als 0

    Nick McCormack verwendet z-index: -1 in seiner Antwort. Dies ist in der Tat eine Ausnahme, was Ihre Gefühle zu geben. Beachten Sie, dass z-index: -1 verschiebt ein element hinter viele Ihre Elemente in den hintergrund.

    Browser-Unterschiede

    Neben Internet Explorer unterstützt keine negativen stapeln Indizes und ist sehr streng mit dem element (Kind/Eltern) Positionen. Jedes element Ebene hat eine eigene stacking-context, also haben Sie 'kommunizieren' über das Eltern-element. Sehen diese Erklärung.

    Laut Das Smashing Magazine, die select element, das ist ein fenstersteuerelement, hat natürlich einen höheren stapeln index.

    Entsprechend der Shadowbox troubleElement option, vermute ich, dass object, embed und canvas die gleichen Probleme haben.

    Wenn Sie ausblenden möchten .close, warum Sie nicht wirklich verbergen, anstatt sich hinter .popup?

    $('.close').hide();
    • Wie funktioniert die -1 Funktion auf unterschiedlichen Browsern? Weißt du das?
    • Als ich versuchte zu verwenden .und zeigen .verstecken die css-Positionierung des Objekts habe Mist gebaut. Es würde Ruckeln wie verrückt, dann nach Links von 0 die ganze Zeit.
    • -1 funktioniert alles, aber im IE7, aber ist das nicht eine gute Lösung für dieses dilemma. Die 'richtige' Lösung ist nicht eine CSS-leider, aber ach, es ist, was die Frage bittet.
    • ein-und ausblenden von dem, was Objekt? Wenn Ihr .close absolut positioniert ist, sollte dies keinen Einfluss auf die position der anderen Elemente in der .popup. Werden Sie sicher, dass Sie immer eine horizontale und vertikale position auf absolut positionierte Elemente, da sonst der IE ist verwirrt.
    • Klopfstein: ich aktualisierte meine Antwort mit einigen Informationen zu anderen Browsern.
    InformationsquelleAutor Frank van Wijk
  3. 0

    Nein, werden Sie nicht in der Lage sein, um es hinter seinen Eltern. Allerdings könnte man ändern Sie den Anzeigemodus zu "none", so dass es nicht sehen. Dann, wenn Sie Sie brauchen, um zu sehen, die div ändern Sie es zu zeigen.

    Einfache jQuery:

    $('.close').hide();
$('.close').show();

    Gibt es andere Möglichkeiten, etwa das hinzufügen eines Attributs style mit display:none oder display: inline-block als eine Einstellung.

    Update: Nach Aussagen in anderen Antworten, gibt es einen Weg, es zu tun mit z-index. Immer noch denken, das ein - /ausblenden ist der Weg zu gehen. Sehr klar, was Sie tun, auf Ihre Benutzeroberfläche.

    • Einfach verwenden .verbergen und .show schafft eine bouncing-Effekt. Wenn ich dann verwenden .stop() zum stoppen des Prellen es nicht zeigen überhaupt.
    • Bitte fügen Sie weitere Beispiel-HTML, wie in diesem Beispiel wäre schwer zu sehen Prellen.
    InformationsquelleAutor Clarence Klopfstein
Schreibe einen Kommentar