Erfahren Sie in drei Minuten mehr über das Z-Index-Attribut in CSS

Z-Index-Attribut in CSS

Bei der Arbeit an Projekten wird es oft verwendet, um eine Ebene einzublenden und dann in dieser Ebene Arbeiten Sie auf der Popup-Ebene und schließen Sie die Popup-Ebene, wenn der Vorgang abgeschlossen ist, oder klicken Sie auf eine andere Stelle, um die Ebene zu schließen.

Normalerweise wird der Z-Index-Wert im p-Stil festgelegt. Wenn die übergeordnete Ebene beispielsweise den Z-Index auf 100 festlegt, wird die untergeordnete Ebene auf einen Wert größer als 100 festgelegt. Wenn die übergeordnete Ebene angezeigt wird , kann die untergeordnete Ebene angezeigt werden.

Zum Beispiel (kurz schreiben):

<p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 100;height:300px" id="p1" >
 <p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 101;height:100px" id="p2" >
 </p>
</p>

Schließen Sie die Popup-Ebene: $("#p1").hide(); Sie müssen die JQuery-.js-Datei zitieren

Wir können auch auf den Rest der übergeordneten Ebene klicken, um die übergeordnete Ebene auszublenden. Wir müssen nur ein Ereignis auf p1 hinzufügen, um die Funktion hide() auszulösen. Beim Ausführen habe ich jedoch festgestellt, dass das Ereignis von p1 ebenfalls ausgelöst wird, wodurch die Popup-Ebene geschlossen wird. Für p2 ist offensichtlich kein Ereignis festgelegt wird es ausgelöst? Wie kann man es lösen?

Denn egal wie hoch Ihr untergeordnetes Level eingestellt ist, das übergeordnete Ereignis wird ausgelöst und das Setzen des Z-Index auf 10000 wird nicht funktionieren.

Lösung:

$('#p2').click(function (e) {
            e.stopPropagation();
            return false;
        });

Fügen Sie einfach ein Ereignis auf p2 hinzu und verwenden Sie „e.stopPropagation();“, um Blasenbildung zu verhindern, damit das p1-Ereignis nicht ausgelöst wird.

Vielen Dank an alle fürs Lesen, ich hoffe, dass Sie viel davon profitieren werden

Dieser Artikel wurde reproduziert von: https://blog.csdn.net/lilinoscar/article/details/ 51860462

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonErfahren Sie in drei Minuten mehr über das Z-Index-Attribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!