Introdução ao z-index

A propriedade z-index em CSS gerencia a ordem de emiplhamento de elementos em uma página web. Considerando que os displays são bidimensionais, representados pelos eixos x e y, o z-index introduz o conceito do eixo z para definir qual elemento aparece na frente de outro durante a sobreposição. Elementos com valores mais altos de z-index sobrepõem aqueles com valores mais baixos.

Demonstração Básica

Considere dois elementos div com dimensões diferentes. O segundo elemento é deslocado verticalmente para criar uma sobreposição natural.

<div style="width:250px;height:250px;background:lightblue;"></div>
<div style="position:relative;top:-60px;width:120px;height:120px;background:lightcoral;"></div>

Sem z-index, o segundo elemento cobre parcialmente o primeiro. Ao adicionar z-index ao primeiro elemento com um valor negativo, ele passa para trás.

<div style="width:250px;height:250px;background:lightblue;z-index:-2;"></div>
<div style="position:relative;top:-60px;width:120px;height:120px;background:lightcoral;"></div>

Validade Apenas em Elementos Posicionados

O z-index só afeta elementos com posicionamanto definido (por exemplo, position: relative, absolute ou fixed). Para elementos sem posicionamento, o z-index é ignorado.

<div style="width:250px;height:250px;background:lightgreen;z-index:20;"></div>
<div style="position:relative;top:-60px;width:120px;height:120px;background:purple;"></div>

Neste caso, o primeiro div não tem posicionamento, então seu z-index não tem efeito, e o segundo div ainda o cobre.

Elementos com Mesmo z-index

Quando dois elementos têm o mesmo z-index ou nenhum valor definido, a ordem de empilhamento segue regras específicas:

• Se ambos os elementos são posicionados com z-index igual, o elemento que aparece mais tarde no código DOM sobrepõe o anterior.
• Se um elemento é posicionado e outro não, o posicionado sobrepõe o não posicionado, mesmo sem z-index explícito.

<div style="position:relative;width:250px;height:250px;background:yellow;"></div>
<div style="position:relative;top:-60px;width:120px;height:120px;background:orange;"></div>

Interação entre Pai e Filho

Quando um elemento pai tem z-index válido (posicionado e com valor definido), seus elementos filhos herdam essa ordem de empilhamento e aparecme acima do pai, independentemente do z-index definido nos filhos.

<div style="position:relative;width:250px;height:250px;background:gray;z-index:15;">
  <div style="position:relative;width:100px;height:100px;background:pink;z-index:-8;"></div>
</div>

Se o pai não tem z-index válido (por exemplo, não posicionado), o z-index do filho funciona independentemente.

<div style="width:250px;height:250px;background:gray;">
  <div style="position:relative;width:100px;height:100px;background:pink;z-index:-8;"></div>
</div>

Relação entre Irmãos e Seus Filhos

A ordem de empilhamento dos elementos filhos depende do z-index de seus elementos pais. Se dois elementos irmãos têm z-index válido, seus filhos são organizados com base nos valores dos pais.

<div style="position:relative;width:120px;height:120px;background:cyan;z-index:8;">
  <div style="position:relative;width:60px;height:260px;background:magenta;z-index:40;"></div>
</div>

<div style="position:relative;width:120px;height:120px;background:lime;z-index:12;margin-top:5px;">
  <div style="position:relative;width:40px;height:160px;background:navy;z-index:-12;"></div>
</div>

Aqui, o primeiro pai tem z-index:8 e o segundo tem z-index:12. Embora o filho do primeiro pai tenha z-index:40 (mais alto), ele ainda é coberto pelo segundo pai e seu filho porque o valor z-index do segundo pai é maior.