So passen Sie die Stapelung von Elementen mithilfe der CSS-Z-Index-Eigenschaft an

z-index ist ein Attribut, das die Stapelreihenfolge von Elementen festlegen kann. Wenn beim Stapeln von Papieren das untere Papier hinter dem oberen Papier verborgen ist, sind die Elemente der WEB-Site ebenfalls nicht sichtbar Auf diese Weise gestapelt, können Sie die Stapelreihenfolge ändern.

Die Stapelreihenfolge wird durch die Größe des Werts bestimmt

Geben Sie den Z-Index-Attributwert an eine Zahl. Wenn dieser Wert groß ist, steht er vorne, wenn er klein ist, steht er hinten.

Für das rote Feld setzen wir den Wert des Z-Index auf 10 und für das blaue Feld legen wir den Wert des Z-Index auf 100 fest .

Da der Z-Index der blauen Box einen größeren Wert hat, wird er vorne angezeigt.

Wenn Sie den Z-Index-Wert des blauen Kästchens auf 5 ändern, liegt das rote Kästchen vorne

, da der Wert des roten Kästchens größer als der des blauen Kästchens ist

Bei Verwendung des Z-Index-Attributs muss die Position angegeben werden

Außerdem kann das Z-Index-Attribut nur für Positionen mit relativ, absolut verwendet werden , behoben und kann nicht für position:static verwendet werden.

Wie verwende ich das Z-Index-Attribut?

Grundlegende Syntax

选择器{
z-index: 数值;
}

Sehen wir uns konkrete Beispiele an

HTML

<div class="z-index_test">
</div>
<div class="z-index_test2">
</div>

So passen Sie die Stapelung von Elementen mithilfe der CSS-Z-Index-Eigenschaft an

.z-index_test {
    height:  200px;             
    width:  200px;              
    background-color: #FF5722;  
    position:  relative;       
    z-index: 10;                
}
.z-index_test2 {
    height:  200px;             
    width:  200px;              
    background-color: #03A9F4;  
    position:  absolute;        
    top: 70px;                  
    left: 100px;                
    z-index: 100;              
}

Der Betriebseffekt ist wie folgt

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in den entsprechenden Kolumnen-Tutorials der PHP-Chinese-Website! ! !

Das obige ist der detaillierte Inhalt vonSo passen Sie die Stapelung von Elementen mithilfe der CSS-Z-Index-Eigenschaft an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!