Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS

1. Die Entstehung des Problems

Habe eine flache Liste geschrieben, von denen einige Popup-Fenster haben, die beim Hovern erscheinen. Das gewünschte Ziel besteht darin, den Inhalt des Listenelements abzudecken, wenn das Popup-Fenster angezeigt wird, um sicherzustellen, dass der Inhalt des Popup-Fensters zuerst angezeigt wird.

Der Aufbau des Elements ist etwa wie folgt:

<div Klasse="Liste">
    <div Klasse="Einheit">
        <div class="content">Listenelement 1</div>
        <div class="hover">Popup-Fenster 1</div>
    </div>
     <div Klasse="Einheit">
        <div class="content">Listenelement 2</div>
    </div>
     <div Klasse="Einheit">
        <div class="content">Listenelement 3</div>
        <div class="hover">Popup-Fenster 3</div>
    </div>
</div>

Einige der Stile sind wie folgt:

.Einheit{
    Position: relativ;
    Z-Index: 1;
}
.schweben{
    Position: absolut;
    Z-Index: 10;
}

Die tatsächliche Wirkung ist wie folgt:

Obwohl das Popup-Fenster von Listenelement 1 seinen eigenen Inhalt verdecken kann, kann es den Inhalt von Listenelement 2 nicht verdecken.

2. Grundsatz

Es scheint, dass der Z-Indexwert des Popup-Fensters größer ist als der Z-Indexwert des übergeordneten Elements des Listenelements (einschließlich Geschwisterelemente), sodass er den Inhalt aller Listenelemente abdecken sollte.

Tatsächlich habe ich hier aber einen ganz grundlegenden Punkt übersehen. Da es sich bei dem Popup-Fenster um ein untergeordnetes Element des Listenelements handelt, ist die Größe seines Z-Index-Werts nur im Vergleich zu den Geschwisterelementen des Popup-Fensters von Bedeutung. Was die Hierarchie mit dem Inhalt des übergeordneten Elements (Listenelement) betrifft, sollten Sie die hierarchische Beziehung des übergeordneten Elements betrachten.

Wir können uns vorstellen, dass jedes Listenelement eine Parallelwelt ist. Der in einer Parallelwelt festgelegte Z-Index ist nur dann sinnvoll, wenn er mit anderen Inhalten in dieser Welt verglichen wird. Wenn Sie ihn mit anderen Parallelwelten vergleichen möchten, tut es mir leid, dieses Ding hat eine Dimensionsunterdrückung. Wenn das Level einer anderen Parallelwelt höher ist als das Ihrer Welt, ist es unabhängig davon, wie hoch Ihr eigener Z-Index eingestellt ist, nur eine interne Dominanz und wird nie höher sein als das Level der anderen Welt.

Obwohl im obigen Beispiel der Z-Index aller Listenelemente entsprechend der Reihenfolge ihres Auftretens auf 1 gesetzt ist, wird der gesamte Inhalt von Listenelement 1 von Listenelement 2 abgedeckt, da das zweite Listenelement höher ist als das erste.

3. Lösung

Die einzige Lösung, die derzeit in Betracht kommt, besteht darin, das Popup-Fenster und das Listenelement auf die gleiche Ebene zu setzen (sie zu Geschwisterelementen zu machen), den Z-Index-Wert des Popup-Fensters größer als den Z-Index des Listenelements zu machen und die Positionierung jedes Popup-Fensters manuell mit js festzulegen.

Dies ist das Ende dieses Artikels über die Lösung des Hierarchieproblems des Z-Index von untergeordneten Elementen und der Geschwisterknoten von übergeordneten Elementen in CSS. Weitere relevante Inhalte zur CSS-Z-Indexhierarchie finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!