Understanding CSS z-index

Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo z-index (en-US) lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.

Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.

(from CSS 2.1 Section 9.9.1 - Layered presentation)

Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao render normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS z-index (en-US).

Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de stacking. Uma sessão dedicada foi reservada na especificação do CSS CSS-2.1 Appendix E para explicar melhor essas regras.

Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.

1. Stacking without z-index : Regras padrões de empilhamento
2. Stacking and float : Como lidar com elementos que usam float
3. Adding z-index : Usando index-z para mudar o empilhamento padrão
4. The stacking context : Notas sobre contexto do empilhamento
5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último level
6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os levels
7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo level

Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.