So stellen Sie die Elementebene in CSS auf die höchste Stufe

In CSS können Sie das Attribut „z-index“ verwenden, um das Element auf die höchste Ebene zu bringen. Die Funktion dieses Attributs besteht darin, die Stapelreihenfolge von Elementen festzulegen, die immer vor Elementen liegen mit einer niedrigeren Stapelreihenfolge, d. h. das Element hat die höchste Ebene und die Syntax lautet „element {z-index:number;}“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So stellen Sie die Elementebene in CSS auf die höchste ein

Steuern Sie das Element auf der obersten Ebene, die über das Z-Index-Attribut in CSS festgelegt werden kann. Nehmen wir als Beispiel ein dreischichtiges Div, um zu erklären, wie der CSS-Stil das Div auf die oberste Ebene steuert.

1. Erstellen Sie eine neue HTML-Datei mit dem Namen test.html, um zu erklären, wie der CSS-Stil div auf der obersten Ebene steuert. Verwenden Sie CSS, um die Breite aller Divs auf der Seite auf 300 Pixel, die Höhe auf 300 Pixel und die Position der Divs auf absolute Positionierung festzulegen.

Erstellen Sie drei Divs und beschriften Sie sie mit Text, nämlich das untere Div, das mittlere Div und das obere Div. Legen Sie die Klassenattribute für die drei Divs auf eins, zwei und drei fest, die zum Formatieren der folgenden Klassennamen verwendet werden.

Stellen Sie den Div-Stil mit dem Klassennamen eins ein, setzen Sie die Hintergrundfarbe auf Rot, den Abstand vom linken Rand der Seite auf 0, den Abstand vom oberen Rand der Seite auf 0 und verwenden Sie zum Festlegen den Z-Index sein Niveau auf 1.

2. Legen Sie im CSS-Tag den div-Stil mit dem Klassennamen zwei fest, stellen Sie die Hintergrundfarbe auf Gelb, 50 Pixel vom linken Rand der Seite und 50 Pixel vom oberen Rand der Seite ein und verwenden Sie z -index, um seine Ebene festzulegen, also über dem Div mit dem Klassennamen eins.

Stellen Sie den Div-Stil mit dem Klassennamen drei ein, stellen Sie die Hintergrundfarbe auf Rosa, 100 Pixel vom linken Rand der Seite und 100 Pixel vom oberen Rand der Seite ein und verwenden Sie den Z-Index, um die Ebene auf 3 zu setzen Das sind drei Divs auf der Seite auf der obersten Ebene.

Öffnen Sie die Datei test.html im Browser, um den erzielten hierarchischen Effekt anzuzeigen.

Zusammenfassung:

1. Erstellen Sie drei Divs und setzen Sie ihre Positionsattribute auf absolute Positionierung.

2. Verwenden Sie den Z-Index, um die hierarchische Beziehung der drei Divs festzulegen. Je größer die Zahl, desto höher.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Elementebene in CSS auf die höchste Stufe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!