Capas de CSS (Capas)

Regla @font CSS-Regla face de z CSS

La propiedad index se puede usar con la propiedad position para crear efectos de capa como Photoshop.-La propiedad index apila elementos en la capa

Generalmente se considera que una página HTML es una página bidimensional, porque los textos, imágenes y otros elementos se organizan en la página sin superponerse. Sin embargo, además de sus posiciones horizontales y verticales, también se puede usar CSS z-La propiedad index apila cajas en el eje Z, es decir, una apilada sobre otra apilada. Esta propiedad especifica una caja, su nivel de apilamiento horizontalposiciónson uno de los siguientes: absolute, fixed o relative.

La posición del eje Z de cada capa se representa como un entero que indica el orden de apilamiento de la renderización. Los valores más grandes de z-index se superpone al elemento de menor nivel.

Un elemento con z-La propiedad index le ayuda a crear diseños de página web más complejos. A continuación se muestra un ejemplo de cómo crear capas en CSS.

.caja{
　　ancho:　150px;
　　altura:　150px;
　　opacidad: 0.9;
　　posición: absoluta;　　　　　　　　　　　　　　　　　　　　　　　
　　arriba:　30px;
　　izquierda:　30px;
}
.red{
　　fondo: #ff0000;
　　z-index:　1;
}
.green{
　　fondo: #00ff00;
　　z-index:　2;
}
.blue{
　　fondo: #0000ff;
　　z-index:　3;
}

El efecto después de ejecutarlo es el siguiente:

Usamos z-El estilo de apilamiento de index, en el DIV real+Al diseñar el布局 CSS, necesitamos el estilo de posición absoluta y podemos usar left, right para la posición, a través de diferentes z-La implementación de index realiza el orden de apilamiento de capas.