Layout do CSS - Propriedade z-index

z-index a propriedade especifica a ordem de empilhamento do elemento.

propriedade z-index

Quando um elemento é posicionado, ele pode sobrepor outros elementos.

z-index a propriedade especifica a ordem de empilhamento do elemento (qual elemento deve estar à frente e qual deve estar atrás).

a ordem de empilhamento do elemento pode ser um número positivo ou negativo:

Este é um título

porque a imagem z-index com -1, então ele será colocado atrás do texto.

instância

img {
  posição: absoluta;
  esquerda: 0px;
  topo: 0px;
  z-index: -1;
}

Experimente você mesmo

Atenção:z-index apenas paraelementos posicionados（posição: absoluta、posição: relativa、posição: fixa ou posição: sticky）eitem flexível（display: flex do elemento filho direto).

Outro exemplo de z-index

instância

Aqui, vemos que os elementos com uma ordem de empilhamento maior sempre ficam acima dos elementos com uma ordem de empilhamento menor:

<html>
<head>
<style>
.container {
  posição: relativa;
}
.caixa-preta {
  posição: relativa;
  z-index: 1;
  borda: 2px sólida preta;
  height: 100px;
  margem: 30px;
}
.caixa-cinza {
  posição: absoluta;
  z-index: 3;
  fundo: cinza-claro;
  altura: 60px;
  largura: 70%;
  esquerda: 50px;
  topo: 50px;
}
.caixa-verde {
  posição: absoluta;
  z-index: 2;
  fundo: verde-claro;
  largura: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Caixa preta</div>
  <div class="gray-box">Caixa cinza</div>
  <div class="green-box">Caixa verde</div>
</div>
</body>
</html>

Experimente você mesmo

sem z-index

se dois elementos posicionados não especificarem z-index quando há sobreposiçãoNo código HTML, o elemento definido por últimoo elemento será exibido no topo.

instância

Igual ao exemplo acima, mas aqui não é especificado z-index：

<html>
<head>
<style>
.container {
  posição: relativa;
}
.caixa-preta {
  posição: relativa;
  borda: 2px sólida preta;
  height: 100px;
  margem: 30px;
}
.caixa-cinza {
  posição: absoluta;
  fundo: cinza-claro;
  altura: 60px;
  largura: 70%;
  esquerda: 50px;
  topo: 50px;
}
.caixa-verde {
  posição: absoluta;
  fundo: verde-claro;
  largura: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Caixa preta</div>
  <div class="gray-box">Caixa cinza</div>
  <div class="green-box">Caixa verde</div>
</div>
</body>
</html>

Experimente você mesmo

Atributo CSS

Atributo Descrição
z-index Definir a ordem de empilhamento do elemento.