Acredito que todos estejam familiarizados com a propriedade CSS z-index, que geralmente é usada para controlar a ordem de exibição (em cascata) entre dois ou mais elementos quando eles se sobrepõem.
Por que o z-index está definido, mas não entra em vigor?
Vejamos este exemplo. Por que o z-index de box1 está definido para ser maior que o valor de z-index de box2 e por que box1 não é exibido na parte superior de box2.
/* css */
.box1{
z-index: 10;
background-color: red;
}
.box2{
z-index: 5;
background-color: blue;
margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>
contexto em cascata
A razão pela qual o z-index que você definiu não tem efeito é porque os elementos que você definiu não formam um contexto de empilhamento . Então, o que é um contexto de empilhamento? Você pode entender que, em circunstâncias normais, os elementos html são organizados à esquerda e à direita, o que equivale a serem organizados ao longo dos eixos x e y. Então, o contexto em cascata introduz um conceito de eixo z para nós . Se estivermos de frente para o navegador ( page), a linha entre o navegador e o usuário é o eixo z.
Quando os elementos formam um contexto de empilhamento, você pode definir o valor do z-index para controlar a ordem de empilhamento dos elementos no eixo z para obter o efeito de "cobertura" entre os elementos
gerar contexto em cascata
O contexto em cascata pode ser gerado através das seguintes propriedades comuns
- O valor da posição não é estático (observe que z-index não pode ser automático quando o valor é absoluto ou relativo)
- exibição: flex; elementos filho do layout e o valor do z-index não pode ser automático
- exibição: grade; elementos filho do layout e o valor do z-index não pode ser automático
- elementos com um valor de opacidade menor que 1
- O valor de transform não é nenhum
- O valor da perspectiva não é nenhum
- O valor do filtro não é nenhum
Veja um exemplo: o valor de z-index é válido porque o valor de position está definido.
<!-- css -->
.box1{
z-index: 10;
background-color: red;
position: relative;
}
.box2{
z-index: 5;
background-color: blue;
margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>
afinal
Veja um exemplo:
/* css */
.box{
width: 200px;
height: 100px;
background-color: red;
color: #fff;
z-index: 5;
position: relative;
}
.box1{
width: 120px;
height: 50px;
background-color: green;
color: #fff;
position: relative;
z-index: 10;
}
.box2{
width: 120px;
height: 50px;
background-color: rgb(70, 0, 128);
color: #fff;
position: relative;
z-index: 7;
margin-top: -10px;
padding-top: 10px;
}
.box3{
width: 120px;
height: 100px;
background-color: blue;
color: #fff;
margin: -70px 0 0 90px;
position: relative;
z-index: 6;
text-align: right;
}
/* HTML */
<div class="box">
<div class="box1">z-index: 10</div>
<div class="box2">z-index: 5</div>
</div>
<div class="box3">z-index: 4</div>
box, box1, box2 e box3 são, cada um, um contexto de empilhamento. O contexto de empilhamento de box contém box1 e box2, indicando que o contexto de empilhamento pode conter contextos de empilhamento.
O valor do índice z da caixa é menor que o valor do índice z da caixa3, então a caixa3 cobre a caixa e é exibida na camada superior. No entanto, os valores do índice z da caixa1 e da caixa2 são maiores que os valores z- valor de índice de box3, mas eles também são cobertos por box3 e exibidos na camada inferior. A relação de empilhamento de elementos é limitada pelo elemento pai, em outras palavras, a ordem de empilhamento de dois elementos não é afetada pelo tamanho do índice z do elemento filho.
Dica: Como verificar se os elementos formaram um contexto em cascata?
Use a ferramenta Navegador Edge, F12 e selecione a guia Vista 3D. Marque a opção mostrada na figura abaixo: Quando o elemento possui um valor z-index, significa que um contexto de empilhamento é formado.
