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

Übungsbeispiel im Z-Index-Stil

Fallbeschreibung:

Alle drei Felder verwenden das absolute Positionierungsattribut position:absolute style und legen die gleichen Höhen- und Breitenstile fest. Um die Beobachtung zu erleichtern, verwenden wir die linken und rechten Attribute und weisen ihnen unterschiedliche Werte zu, um sie zu ordnen.

Divcss5-1-Box-Hintergrund ist schwarz, Z-Index:10

Divcss5-2-Box-Hintergrund ist rot, Z-Index:20

Divcss5-3-Box-Hintergrund ist Blau, z-index:15

bedeutet, dass Sie sehen können, dass das erste Feld z-index:10 ist, sodass es unten überlappt, während das zweite Feld, z-index:20, den größten Wert hat. Damit die oberste Ebene überlappt, wird im dritten Feld der Z-Index:15 zentriert.

4. Zusammenfassung des Z-Index

Wir verwenden den Z-Index-Überlappungssequenzstil. Im tatsächlichen DIV+CSS-Layout benötigen wir den absoluten Positionierungsstil und können Links und Rechts für die Positionierung verwenden. Durch unterschiedliche Z-Index-Werte wird eine überlappende Reihenfolge der Ebenen realisiert.

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!