Ausführliche Erläuterung des Beispiels für die überlappende Reihenfolge der CSS-Z-Index-Ebene

DIV-Ebene, Span-Ebene usw.HTML-TagEbenenüberlappungssequenzstilZ-Index, wir verwenden es normalerweise weniger, aber es ist unvermeidlich, dass wir auf die Verwendung stoßen CSS-Z-Index. Als nächstes führt divcss5 den Z-Index ein, von grundlegenden Attributen bis hin zum Festlegen der Stapelreihenfolge und der Überlappungsreihenfolge von Objekten, und erklärt und erlernt den Z-Index von der grundlegenden Syntax bis hin zu Tutorials für Anwendungsfälle.

1. Z-Index-Syntax und Struktur

Z-Index und spezifische Zahlen

Zum Beispiel:

div{z-index:100}

Hinweis: Der Wert von z -index Nicht mit der Einheit.

Je höher die Zahl des Z-Index, desto höher ist er, und der Wert muss eine ganze Zahl und eine positive Zahl (eine ganze Zahl einer positiven Zahl) sein.

2. Bedingungen für die Verwendung des Z-Index

Z-Index kann nur verwendet werden, wenn das Attribut absolute Positionierung Position:absolute“ verwendet wird. Normalerweise überlappen sich verschiedene Objektfelder und ordnen sie in unterschiedlicher Reihenfolge an. Daher benötigen wir das Z-Index-Stilattribut.

3. Z-Index-Anwendungsfall

Um die Beobachtung von Z-Index-Stilattributen zu erleichtern, haben wir 3 DIV-Boxen mit unterschiedlichen CSS-Hintergrundfarben eingerichtet. und die Einstellungen sind die gleiche CSS-Höhe und CSS-Breite. Stellen Sie die Hintergrundfarbe auf Schwarz, Rot und Blau ein. Die CSS-Breite beträgt 100 Pixel, die CSS-Höhe beträgt 50 Pixel.

1. HTML-Code-Snippet

/* www.divcs5.com z-index实例 */ 
.divcss5{position:relative;} 
.divcss5-1,.divcss5-2,.divcss5-3 
{width:100px;height:50px;position:absolute;} 
.divcss5-1{z-index:10;background:#000;left:10px;top:10px} 
.divcss5-2{z-index:20;background:#F00;left:20px;top:20px} 
.divcss5-3{z-index:15;background:#00F;left:30px;top:30px}

3

<div class="divcss5-1"></div> 
<div class="divcss5-2"></div> 
<div class="divcss5-3"></div>

Div CSS Z-Index überlappender Bestellfall-Screenshot

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispiels für die überlappende Reihenfolge der CSS-Z-Index-Ebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!