Camadas (Camadas) do CSS

Regra @font do CSS-Regra face do CSS z

A propriedade index pode ser usada em conjunto com a propriedade position para criar efeitos de camadas como o Photoshop.-A propriedade index empilha elementos em camadas

Normalmente, consideramos a página HTML como uma página bidimensional, porque o texto, imagens e outros elementos são alinhados na página sem sobreposição. Mas, além de suas posições horizontais e verticais, também podemos usar CSS z-A propriedade index empilha caixas ao longo do eixo z, ou seja, uma caixa sobreposta sobre outra. Esta propriedade especifica uma caixa whosepositioné um dos seguintes: absolute, fixed ou relative.

A posição do eixo z de cada camada é representada por um inteiro que indica a ordem de renderização das camadas. O valor z maior-index sobrepõe-se ao elemento de menor valor.

Um elemento com z-A propriedade index pode ajudar a criar layouts de página web mais complexos. Abaixo está um exemplo de como criar camadas no 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;
}

O efeito após a execução é o seguinte:

Usamos z-estilos de sobreposição do index, na prática, o DIV+Quando estamos layoutando o CSS, precisamos de estilos de posicionamento absoluto e podemos usar left e right para posicionamento, através de diferentes z-A implementação do valor index realiza a ordenação de sobreposição de camadas.