Understanding CSS z-index

Esta tradução está incompleta. Ajude atraduzir este artigo.

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.

  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.

Original Document Information

 

Etiquetas do documento e colaboradores

 Colaboradores desta página: songbird159, teoli, MaxWilliamJF
 Última atualização por: songbird159,