Heim > Artikel > Web-Frontend > Detaillierte Erklärung des Z-Index in CSS (1)

Detaillierte Erklärung des Z-Index in CSS (1)

零下一度Original: 2017-05-12 14:16:131597Durchsuche

In unserem häufig verwendeten CSS dient das Z-Index-Attribut dazu, die Stapelreihenfolge von Knoten festzulegen. Dies ist unser allgemeiner Z-Index. Indexattribut. Gleichzeitig sind wir immer vage über das Konzept der Stapelreihenfolge, was in unserem üblichen Layout zu einigen Problemen führen wird. Im Folgenden habe ich einige persönliche Informationen zum Z-Index in CSS gegeben. Ich hoffe, Sie können mich korrigieren, wenn ich falsch liege.

Im CSS-Layout verwenden wir häufig

float:laft; und float:right; >Einige Leute glauben fälschlicherweise, dass es eine Stapelreihenfolge zwischen Positionierung und Positionierung gibt. Sie haben festgestellt, dass es sich bei ihrer Standardeinstellung um keine Stapelreihenfolge handelt. Es wird angenommen, dass dies nur die Reihenfolge der Tags im HTML ist durch die Stapelreihenfolge zwischen Positionierung und Positionierung verursacht werden.

Das Folgende ist ein Beispiel für die normale Verwendung von Z-Index-Code:

Die Statik bei der Positionierung ist ein Standardablauf, daher werde ich sie hier nicht erklären

Wenn wir drei Kästchen haben

Wir legen für sie fest, relativ und absolut fest; die Hintergrundfarbe ist Rot, Blau, Grün

div {
 width: 100px;
 height: 100px;
 color: white;
 float: left;
 }
.div1 {
 position: fixed;
 background-color: red;
 }
.div2 {
 background-color: blue;
 position: relative;
 }
.div3 {
 background-color: green;
 position: absolute;
 }
 </style>
</
head
>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>

Wir werden feststellen, dass das grüne Kästchen von Absolut wird im HTML-Code oben stehen. Durch Ändern der Positionsreihenfolge der Tags kann das Feld natürlich oben im Stapel angezeigt werden, wenn wir die Reihenfolge der

HTML-Tags , dann können wir die zweite Methode z-index verwenden:

Wenn wir z-index hinzufügen, sollten wir beachten, dass dieser Stil auch einen Wert hat; Je größer der Z-Index-Wert im Stil, desto höher die Stapelebene. Natürlich sollten wir auch beachten, dass der Z-Index nicht immer funktioniert.

Nur im gleichen Stil, z. B. Stapeln zwischen Positionierung und Positionierung, Stapeln zwischen

Floating

und Floating. Wenn zwei Boxen vorhanden sind, ist eine Box ein schwebendes Element und die andere eine Positionierung Element Element, zu diesem Zeitpunkt möchten wir, dass das schwebende Feld über dem Positionierungsfeld angezeigt wird. Das Festlegen des Z-Index ist derzeit nutzlos.

Die Stapelreihenfolge der positionierten Boxen selbst ist höher als die der schwebenden Boxen. Um dieses Problem zu lösen, müssen wir zu diesem Zeitpunkt die schwebenden Boxen durch positionierte Boxen ersetzen. Nach dem Festlegen können wir einen Z-Index durchführen um die Stapelreihenfolge festzulegen. Das oben Gesagte ist meine persönliche Meinung. Ich hoffe, es kann in Zukunft auch allen helfen. Wenn Sie anderer Meinung sind, können Sie diese gerne äußern.

[Verwandte Empfehlungen]

Kostenloses CSS-Online-Video-Tutorial

2. CSS-Online-Handbuch

3. php.cn Dugu Jiujian (2) – CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Z-Index in CSS (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie drei Beispiele für neue CSS-FunktionenNächster Artikel：Teilen Sie drei Beispiele für neue CSS-Funktionen

In Verbindung stehende Artikel

Mehr sehen