So richten Sie eine hierarchische CSS-Beziehung ein

In CSS können Sie das Attribut z-index verwenden, um die Stapelreihenfolge von Elementen mit einer höheren Stapelreihenfolge festzulegen ist „z- index:numeric;“, negative Werte sind zulässig.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie das Z-Index-Attribut verwenden, um die Ebene festzulegen. Das Attribut „z-index“ legt die Stapelreihenfolge der Elemente fest. Elemente mit einer höheren Stapelreihenfolge erscheinen immer vor Elementen mit einer niedrigeren Stapelreihenfolge. (Z-Index funktioniert nur bei positionierten Elementen).

Studenten, die sich mit dem Seitenlayout befasst haben, sollten mit dem Z-Index-Attribut bestens vertraut sein. Z-Index ist ein spezielles Attribut für die Webseitenanzeige. Da das vom Monitor angezeigte Muster eine zweidimensionale Ebene ist, verfügt es über eine x-Achse und eine y-Achse zur Darstellung des Positionsattributs. Um das dreidimensionale Konzept wie die Überlagerungsreihenfolge der oberen und unteren Schichten von Anzeigeelementen darzustellen, wird das Z-Index-Attribut eingeführt, um den Unterschied auf der Z-Achse darzustellen. Gibt die obere und untere dreidimensionale Beziehung eines Elements in der Überlagerungssequenz an.

Elemente mit einem größeren Z-Indexwert werden Elementen mit einem kleineren Z-Indexwert überlagert. Bei positionierten Objekten, für die diese Eigenschaft nicht angegeben ist, befinden sich Objekte mit positiven Z-Index-Werten darüber und Objekte mit negativen Z-Index-Werten darunter.

Einfache Demonstration

<div style="width:200px;height:200px;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;"><div>

Zwei DIVs, das zweite bewegt sich um 50 Pixel nach oben, die normale Situation sollte so sein

Das zweite Div deckt das erste Div ab, fügen Sie das Z-Index-Attribut zum zweiten hinzu

<div></div>
    <div><div> Das Ergebnis wird so aussehen, die einfachste Anwendung von Z-Index sieht so aus: Objekt) wird verwendet, um die Stapelreihenfolge der positionierten Elemente in der Richtung senkrecht zum Anzeigebildschirm (Z-Achse genannt) zu bestimmen. Das heißt, wenn das Element nicht positioniert ist, ist der dafür festgelegte Z-Index ungültig. <p><pre class="brush:html;toolbar:false"><div style="width:200px;height:200px;z-index:30"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>

Obwohl der Z-Index des ersten p größer ist als der des zweiten p, wird er dennoch vom zweiten p abgedeckt, da das erste p nicht positioniert ist und sein Z-Index-Attribut nicht funktioniert.

Wer geht bei gleichem Z-Index nach oben und wer nach unten?

Es gibt eigentlich zwei Situationen für den gleichen Z-Index

1 Wenn zwei Elemente nicht positioniert sind, überschneidet sich die Position, oder Wenn beide Elemente positioniert wurden und z- Wenn sich die Position desselben Index überschneidet, überschreiben die späteren Elemente entsprechend der Reihenfolge des Dokumentenflusses die vorherigen.

<div style="position:relative;width:200px;height:200px;"></div>
<div style="position:relative; top:-50px; width:100px;height:100px;"><div>

2. Wenn für keines der Elemente ein Z-Index festgelegt ist, verwenden Sie den Standardwert, eines ist positioniert und das andere ist nicht positioniert, dann deckt das positionierte Element das nicht positionierte Element ab

Eltern-Kind-Beziehung Verarbeitung

Wenn der Z-Index des übergeordneten Elements gültig ist, stimmt das untergeordnete Element mit dem übergeordneten Element überein, unabhängig davon, ob der Z-Index festgelegt ist oder nicht, und liegt über dem übergeordneten Element

<div style="position:relative;top:50px;width:200px;height:200px;"></div>
<div style=" width:100px;height:100px;"><div>

Obwohl z -Index des untergeordneten Elements kleiner als der des übergeordneten Elements eingestellt ist, erscheint das untergeordnete Element weiterhin über dem übergeordneten Element

Wenn der Z-Index des übergeordneten Elements ungültig ist (nicht positioniert oder mit dem Standardwert verwendet) , dann wird die Z-Index-Einstellung des positionierten untergeordneten Elements wirksam.

<div style="position:relative;width:200px;height:200px;z-index:10;">
        <div style="position:relative;width:100px;height:100px;z-index:-5;"><div>
    </div>

z-index=-5 des untergeordneten Elements wird wirksam und wird vom übergeordneten Element überschrieben.

-Index des Geschwisterelements wirksam wird, wird die Abdeckungsbeziehung seiner untergeordneten Elemente durch das übergeordnete Element bestimmt

<div>
        <div>
<div>
</div>Obwohl der Z-Index des untergeordneten Elements des ersten Div aufgrund seines übergeordneten Elements relativ hoch ist Das Element z- Der Index ist niedriger als der des zweiten Div, daher wird das untergeordnete Element des ersten Div vom zweiten Div und seinen untergeordneten Elementen abgedeckt</div>
</div>