Couches CSS (Couches)

Règle CSS @font-face

Règle CSS z-L'attribut index peut être combiné avec l'attribut position pour créer des effets de calque tels que Photoshop.

L'attribut index pour chevaucher les éléments dans les calques-Généralement, nous considérons une page HTML comme une page bidimensionnelle, car les textes, les images et d'autres éléments sont disposés sur la page sans chevauchement. Mais, en plus de leurs positions horizontales et verticales, on peut utiliser CSS zL'attribut index empile les boîtes le long de l'axe z, c'est-à-dire que l'une est empilée sur l'autre. Cet attribut spécifie une boîte, dont le niveau d'empilement horizontalposition

La position de chaque couche sur l'axe z est représentée par un entier qui indique l'ordre de superposition de la renderisation. La valeur z plus grande est l'une des suivantes : absolute, fixed ou relative.-index qui se superpose à un élément de niveau inférieur.

Un élément avec un z-L'attribut index peut vous aider à créer des conceptions de page web plus complexes. Voici un exemple de la manière dont vous pouvez créer des calques dans CSS.

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

L'effet après l'exécution est le suivant:

Nous utilisons z-L'index d'overlappeur d'ordre, dans le DIV réel+Lorsque nous faisons un布局 CSS, nous avons besoin de styles de positionnement absolu et pouvons utiliser left, right pour la position, en passant par différentes z-L'index valeur implémente l'ordre de superposition des couches.