So verwenden Sie CSS, um den Z-Index eines Divs zu manipulieren

Normalerweise kommt es leicht zu Verwirrung, wenn wir das Attribut Z-Index verwenden müssen. Deshalb geben wir Ihnen heute einen Einblick in den Z-Index, von grundlegenden Attributen bis hin zum Festlegen der Stapelreihenfolge und der Überlappungsreihenfolge von Objekten.

Syntax und Struktur des Z-Index

Z-Index und spezifische Zahl

wie zum Beispiel: p{z-index:100}

Hinweis: z - Der Wert des Index folgt nicht 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.

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.

Um die Beobachtung von Z-Index-Stilattributen zu erleichtern, richten wir drei DIV-Boxen ein, legen unterschiedliche CSS-Hintergrundfarben fest und legen die gleiche CSS-Höhe und CSS-Breite fest. 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

Fallbeschreibung:

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

<p class="p -1"></p> 
<p class="p -2"></p> 
<p class="p -3"></p>

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

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

bedeutet, dass Sie das erste Feld z-index:10 sehen können, sodass es unten überlappt, und das zweite Feld, z-index:20, den größten Wert hat Die oberste Ebene überlappt sich, das dritte Feld legt den Z-Index:15 zentriert fest.

4. Zusammenfassung des Z-Index – TOP

Wir verwenden den überlappenden Sequenzstil des Z-Index. Im tatsächlichen DIV+CSS-Layout benötigen wir den absoluten Positionierungsstil und können links und rechts verwenden Zur Positionierung wird die Ebenenüberlappungssequenz anhand verschiedener Z-Indexwerte angeordnet.

:right

Es gibt so viele Möglichkeiten, Z-Index mit CSS zu betreiben. Freunde, die es benötigen, können es auch weiterhin auf andere Updates auf dieser Website achten.

So legen Sie das Randattribut von CSS fest

Welche Methoden gibt es, um die Hintergrundfarbe von DIV festzulegen?

So verwenden Sie DIV+CSS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um den Z-Index eines Divs zu manipulieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!