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

seletor {
	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):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#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):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#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;
}