CSS-Grundlagen: Ausführliche Erklärung des Z-Index

Das Attribut

Concept

z-index legt die Stapelreihenfolge der Elemente fest. Elemente mit einer höheren Stapelreihenfolge erscheinen immer vor Elementen mit einer niedrigeren Stapelreihenfolge.

Vergleich hierarchischer Beziehungen

1 Ebene: Standardmäßig (oder Position:statisch) überschreiben Elemente am Ende des Dokumentflusses die vorherigen.

2. Wenn bei Geschwisterelementen die Position nicht statisch ist und ein Z-Index vorhanden ist, überdeckt das Element mit einem größeren Z-Index das Element mit einem kleineren Z-Index, d. h. je größer der Z-Index ist -index hat Vorrang. Je höher die Ebene .

3. Unter IE6/7 ist die Position nicht statisch und der Z-Index ist nicht vorhanden. Wenn der Z-Index nicht vorhanden ist, ist der Z-Index 0. In anderen Browsern ist der Z-Index automatisch.

4. Elemente, deren Z-Index automatisch ist, nehmen nicht am Vergleich der bis zu diesem Punkt durchlaufenen hierarchischen Beziehungen teil und deren Z-Index nicht automatisch am Vergleich teilnimmt.

Sequenzregeln

Wenn das Positionsattribut nicht auf dem Knoten festgelegt ist, wird der Knoten auf der Rückseite des Der Dokumentenfluss deckt den vorderen Knoten ab.

<p id="a">A</p><p id="b">B</p>

Targeting-Regeln

Wenn die Position auf „Statisch“ eingestellt ist, deckt der Knoten, der sich hinter dem Dokumentenfluss befindet, immer noch den vorherigen Knoten Floating ab, sodass position:static keinen Einfluss auf die Abdeckungsbeziehung des Knotens hat.

<p id="a" style="position:static;">A</p><p id="b">B</p>

Wenn die Position auf relativ (relative Positionierung), absolut (Absolute Positionierung) oder eingestellt ist Fest (feste Positionierung): Solche Knoten decken Knoten ab, für die das Positionsattribut nicht festgelegt ist oder deren Attributwert statisch ist, was darauf hinweist, dass erstere eine höhere Standardebene haben als letztere.

<p id="a" style="position:relative;">A</p><p id="b">B</p>

Ohne die Beeinträchtigung des Z-Index-Attributs können wir gemäß diesen Reihenfolge- und Positionierungsregeln A erstellen Komplexere Struktur. Hier legen wir nicht die Position für A und B fest, sondern position:relative für den untergeordneten Knoten A-1. Gemäß den Ordnungsregeln deckt B A ab, und gemäß den Positionierungsregeln deckt A' B ab .

<p id="a">
    <p id="a-1" style="position:relative;">A-1</p></p><p id="b">B</p>

Wann wird eine solche Implementierung verwendet, um sich gegenseitig zu überlagern? Es scheint seltsam, wird aber tatsächlich sehr häufig verwendet , wie Mit anderen Worten, die Kategorieanzeigeliste in der Seitenspalte einer E-Commerce-Website kann mit dieser Technik implementiert werden.

Das Bild unten zeigt den Kategorieanzeigebereich einer Website Die Ebene der Kategorie der zweiten Ebene deckt die Kategorieliste der ersten Ebene ab. Der äußere Rahmen der Kategorie der ersten Ebene deckt die schwebende Ebene der Kategorie der zweiten Ebene ab Die Kategorie der ersten Ebene entspricht im obigen Beispiel A, und der Knoten der Kategorie der ersten Ebene entspricht A. -1, die angehängte Ebene der sekundären Kategorie entspricht B.

Teilnahmeregeln

Wir versuchen, nicht das Positionsattribut zu verwenden, sondern das Z-Index-Attribut hinzuzufügen Wir stellen fest, dass das Z-Index-Attribut nur dann wirksam ist, wenn das Positionsattribut des Knotens relativ, absolut oder fest ist

<p id="a" style="z-index:2;">A</p><p id="b" style="z-index:1;">B</p><p id="c" style="z-index:0;">C</p>

<p id="a" style="z-index:2;">A</p><p id="b" style="position:relative;z-index:1;">B</p><p id="c" style="position:relative;z-index:0;">C</p>

Standardwert Regel

Wenn für alle Knoten position:relative definiert ist, befindet sich ein Knoten mit einem Z-Index von 0 an derselben Position wie ein Knoten ohne definierten Z-Index zwischen hoch und niedrig in der Hierarchie; aber Knoten mit einem Z-Index größer oder gleich 1 überdecken Knoten ohne definierten Z-Index; .

<p id="a" style="position:relative;z-index:1;">A</p><p id="b" style="position:relative;z-index:0;">B</p><p id="c" style="position:relative;">C</p><p id="d" style="position:relative;z-index:0;">D</p>

Von übergeordneter Regel

Wenn sowohl A- als auch B-Knoten position:relative definieren und der Z-Index von Knoten A größer ist als der von Knoten B, müssen die untergeordneten Knoten von A die Vorderseite der untergeordneten Knoten von B bedecken.

<p id="a" style="position:relative;z-index:1;">
    <p id="a-1">A-1</p></p>
 <p id="b" style="position:relative;z-index:0;">
    <p id="b-1">B-1</p></p>

 

如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.

Das obige ist der detaillierte Inhalt vonCSS-Grundlagen: Ausführliche Erklärung des Z-Index. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!