From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/guide/css/understanding_z_index/index.html | 48 ++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 files/pt-br/web/guide/css/understanding_z_index/index.html (limited to 'files/pt-br/web/guide/css/understanding_z_index/index.html') diff --git a/files/pt-br/web/guide/css/understanding_z_index/index.html b/files/pt-br/web/guide/css/understanding_z_index/index.html new file mode 100644 index 0000000000..488ca0f600 --- /dev/null +++ b/files/pt-br/web/guide/css/understanding_z_index/index.html @@ -0,0 +1,48 @@ +--- +title: Understanding CSS z-index +slug: Web/Guide/CSS/Understanding_z_index +tags: + - CSS + - Entendendo_CSS_z-index + - Guía + - Web + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_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 {{cssxref("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 {{ cssxref("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. +
  2. Stacking and float : Como lidar com elementos que usam float
    3. +
  3. Adding z-index : Usando index-z para mudar o empilhamento padrão
    4. +
  4. The stacking context : Notas sobre contexto do empilhamento
    5. +
  5. Stacking context example 1 : 2-level HTML hierarquia, z-index no último level
    6. +
  6. Stacking context example 2 : 2-level HTML hierarquia, z-index em todos os levels
    7. +
  7. Stacking context example 3 : 3-level HTML hierarquia, z-index no segundo level
    8. +
+ +

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

+ +
+

Original Document Information

+ + +
+ +

 

-- cgit v1.2.3-54-g00ecf