Entendendo a ordem de empilhamento z-index

Estou um pouco confuso sobre o uso do z-index para decidir a ordem da pilha.

Eu não entendo muito bem como os navegadores tratam os elementos com a propriedade position em conjunto com aqueles sem ele.

Existe uma regra geral para decidir a ordem de empilhamento dos elementos, se ele posicionou ou não os elementos explicitamente?

Exemplos de diferentes situações são apreciados. De um modo geral:

  1. irmão misto
    s com posição definida e sem posição definida.
  2. s nested com o irmão

    s com o conjunto de posições e sem o conjunto de posições.

Noções básicas da propriedade z-index do CSS

Um conceito simples

A propriedade z-index é baseada em um conceito simples: elementos com valores mais altos ficarão na frente de elementos com valores mais baixos ao longo do eixo z. Portanto, se você aplicar z-index: 1 a div.box1 e div.box2 tiver um z-index: 0 , então div.box1 irá sobrepor div.box2 .

Em termos do eixo z, refere-se à profundidade em um plano tridimensional. No seu computador, ele pode ser interpretado como o plano no qual os objects se aproximam e se afastam de você. (Aprenda mais sobre o sistema de coordenadas cartesiano .)

insira a descrição da imagem aqui Fonte: Wikipedia


z-index funciona em elementos posicionados

A menos que você esteja lidando com itens flexíveis ou itens de grade, a propriedade z-index funciona apenas nos elementos posicionados. Isso significa que você pode usar z-index em elementos com position: absolute , position: relative , position: fixed ou position: sticky . Se o elemento tiver position: static (o valor padrão) ou algum outro esquema de posicionamento como um float , o z-index não terá efeito.

Como observado, embora o z-index , conforme definido no CSS 2.1 , se aplique apenas a elementos posicionados, itens flexíveis e itens de grade podem criar um contexto de empilhamento mesmo quando a position é static .

4.3. Item Flex Encomenda Z

Os itens flexíveis são exatamente iguais aos blocos embutidos, exceto pelo fato de que a ordem do documento modificada pelo pedido é usada no lugar da ordem do documento não processada e z-index valores do z-index diferentes de criar auto um contexto de empilhamento, mesmo que a position seja static .

5.4. Ordenação do eixo Z: a ​​propriedade z-index

A ordem de pintura dos itens da grade é exatamente igual aos blocos in-line, exceto que a ordem do documento modificada pelo pedido é usada no lugar da ordem do documento não processada e z-index valores do z-index diferentes de criar auto um contexto de empilhamento, mesmo se a position for static .

Aqui está uma demonstração do z-index trabalhando em itens flexíveis não posicionados: https://jsfiddle.net/m0wddwxs/


Contextos de empilhamento

Quando um elemento é posicionado e um z-index é aplicado, um contexto de empilhamento é criado.

(Veja também: Lista completa das circunstâncias em que um contexto de empilhamento é criado. )

O contexto de empilhamento é um conjunto de regras para gerenciar o elemento posicionado com z-index e seus descendentes. Essas regras governam o posicionamento de elementos filho na ordem de empilhamento e o escopo da influência da propriedade.

Essencialmente, o contexto de empilhamento limita o escopo do z-index ao próprio elemento, e seus elementos filhos não podem afetar a ordem de empilhamento de elementos em outro contexto de empilhamento.

Se você já tentou aplicar valores de z-index cada vez mais altos apenas para descobrir que o elemento nunca se move na frente, você poderia estar tentando sobrepor um elemento em um contexto de empilhamento diferente.

Grupos de elementos com um pai comum que se movem para frente ou para trás juntos na ordem de empilhamento formam o que é conhecido como um contexto de empilhamento. Um entendimento completo dos contextos de empilhamento é a chave para realmente entender como o z-index e a ordem de empilhamento funcionam.

Cada contexto de empilhamento tem um único elemento HTML como seu elemento raiz. Quando um novo contexto de empilhamento é formado em um elemento, esse contexto de empilhamento confina todos os seus elementos filhos em um local específico na ordem de empilhamento. Isso significa que, se um elemento estiver contido em um contexto de empilhamento na parte inferior da ordem de empilhamento, não será possível aparecer na frente de outro elemento em um contexto de empilhamento diferente, que é maior na ordem de empilhamento, mesmo com um z-index de um bilhão!

~ O que ninguém te disse sobre o Z-Index


Ordem de empilhamento

CSS adere a uma ordem de empilhamento ao dispor elementos em uma página. Estas são as regras de empilhamento quando não há nenhum z-index especificado, do mais distante ao mais próximo:

  1. Fundos e bordas do elemento raiz
  2. Elementos de bloco não flutuantes e não posicionados, na ordem em que aparecem no código-fonte
  3. Elementos flutuantes não posicionados, na ordem em que aparecem no código-fonte
  4. Elementos inline
  5. Elementos posicionados, na ordem em que aparecem no código-fonte

Se uma propriedade de z-index for aplicada, a ordem de empilhamento será modificada:

  1. Fundos e bordas do elemento raiz
  2. Elementos posicionados com um z-index inferior a 0
  3. Elementos de bloco não flutuantes e não posicionados, na ordem em que aparecem no código-fonte
  4. Elementos flutuantes não posicionados, na ordem em que aparecem no código-fonte
  5. Elementos inline
  6. Elementos posicionados, na ordem em que aparecem no código-fonte
  7. Elementos posicionados com z-index maior que 0

Fonte: W3C


Conclusão: depois de entender os contextos de empilhamento, o z-index é fácil.


Para exemplos de z-index em ação, veja: Como funciona o z-index!

Para um artigo breve, mas altamente informativo, explicando o z-index (incluindo como a opacity afeta a ordem de empilhamento), veja: O que ninguém lhe disse sobre o Z-Index

Para um resumo completo do z-index , com muitos exemplos e ilustrações, consulte: MDN Noções básicas sobre CSS z-index

E para um mergulho profundo em contextos de empilhamento, leia: W3C Elaborar a descrição de Contextos de Empilhamento