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 style="width:200px;height:200px;"></div>
    <div style="position:relative; top:-50px; width:100px;height:100px;z-index:-5;"><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.

<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 style="position:relative;width:200px;height:200px;">
        <div style="position:relative;width:100px;height:100px;z-index:-5;"><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

Das obige ist der detaillierte Inhalt vonSo richten Sie eine hierarchische CSS-Beziehung ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!