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}

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.

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

<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.

.p _right{ float

:right

;width:150px;border:1px solid #00F;height:50px}

.clear{ clear:both }

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.

Verwandte Lektüre:

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!