CSS Ebenen (Ebenen)

face Regel-CSS z

index-Attribute können mit dem position-Attribut kombiniert werden, um Effekte wie in Photoshop zu erzeugen.-Verwenden Sie z

index-Attribute Elemente in Ebenen schichten-Normalerweise wird die HTML-Seite als zweidimensionale Seite betrachtet, da Text, Bilder und andere Elemente auf der Seite angeordnet sind, ohne sich zu überlagern. Aber zusätzlich zu ihren horizontalen und vertikalen Positionen können Sie CSS zindex-Attribute stapeln Boxen entlang der z-Achse, das bedeutet, eine Box liegt auf einer anderen Box auf. Dieses Attribut bestimmt eine Box, deren Stacking-Levelposition

Die z-Achsenposition jeder Ebene wird durch ein Integer angezeigt, das die Reihenfolge der Darstellung (Stacking Order) darstellt. Ein höherer Wert ist einer der folgenden: absolute, fixed oder relative.-index-Element überlagert ein element mit niedrigerem Index.

Ein z-index-Attribute helfen Ihnen dabei, komplexere Webseitenlayout zu erstellen. Hier ist ein Beispiel, wie man in CSS Ebenen erstellen kann.

.box{
　　width:　150px;
　　height:　150px;
　　opacity: 0.9;
　　position: absolute;　　　　　　　　　　　　　　　　　　　　　　　
　　top:　30px;
　　left:　30px;
}
.red{
　　background: #ff0000;
　　z-index:　1;
}
.green{
　　background: #00ff00;
　　z-index:　2;
}
.blue{
　　background: #0000ff;
　　z-index:　3;
}

Der Effekt nach dem Ausführen ist wie folgt:

Wir verwenden z-index-Schicht叠加顺序样式，在实际DIV+Beim CSS-Layout benötigen wir absolute Positionierungsstile und können left, right verwenden, um durch verschiedene z-index-Werte um die Schicht叠加顺序排列实现。