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
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
.
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.
- Stacking without z-index : Regras padrões de empilhamento
- Stacking and float : Como lidar com elementos que usam float
- Adding z-index : Usando index-z para mudar o empilhamento padrão
- The stacking context : Notas sobre contexto do empilhamento
- Stacking context example 1 : 2-level HTML hierarquia, z-index no último level
- Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os levels
- 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.
Original Document Information
- Author(s): Paolo Lombardi
- This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
- Last Updated Date: July 9th, 2005