div ( z-index: 1; /* integer */ )A z-indexpropriedade em CSS controla a ordem de empilhamento vertical dos elementos que se sobrepõem. Qual deles parece estar fisicamente mais perto de você. z-indexafeta apenas os elementos que têm um valor de posição diferente de static(o padrão).
Os elementos podem se sobrepor por uma variedade de razões, por exemplo, o posicionamento relativo o empurrou sobre outra coisa. A margem negativa atraiu o elemento sobre o outro. Os elementos posicionados de forma absoluta se sobrepõem. Todos os tipos de razões.
Sem qualquer z-indexvalor, os elementos são empilhados na ordem em que aparecem no DOM (o mais baixo no mesmo nível de hierarquia aparece no topo). Elementos com posicionamento não estático sempre aparecerão na parte superior dos elementos com posicionamento estático padrão.
Observe também que o aninhamento desempenha um grande papel. Se um elemento B fica em cima do elemento A, um elemento filho do elemento A nunca pode ser superior ao elemento B.
Observe que a versão mais antiga do Internet Explorer confunde um pouco esse contexto. Aqui está uma correção do jQuery para isso.
Mais Informações
- Screencast: Como funciona o Z-index
- MDN Docs
- Artigo abrangente: Compreendendo o Z-index
- Valores racionais de Z-index
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | 4+ | 4+ | Funciona |