⌘K

Propriedade z-index

A propriedade z-index define qual elemento ficará no topo no caso de vários elementos se sobreporem uns aos outros.

Sintaxe

cssseletor {
  z-index: número | auto;
}

O número deve ser inteiro, positivo ou negativo. Pode ser zero.

Valores

Valor Descrição
Número Um número inteiro define a ordem de empilhamento dos elementos: ao sobrepor elementos uns sobre os outros, ficará no topo aquele com o maior z-index.
auto A ordem de empilhamento é construída automaticamente: ficará acima o elemento que estiver posicionado mais abaixo no código HTML.

Valor padrão: auto.

Exemplo

Neste exemplo, os blocos serão sobrepostos uns aos outros na ordem em que aparecem no código HTML (z-index não está definido e terá o valor padrão - auto). O primeiro bloco ficará na parte inferior (vermelho), e o último - no topo (verde): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Exemplo

Vamos alterar a ordem de empilhamento, definindo z-index. Bloco vermelho - 3, azul - 2, verde - 1. A ordem de empilhamento mudará para o inverso (ficará no topo o bloco com z-index 3): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат:

BackPropriedade positionNextPseudoelemento backdrop