A maioria das propriedades CSS são fáceis de usar. Muitas vezes, quando você usa propriedades CSS em elementos de uma linguagem de marcação, os resultados aparecem imediatamente quando você atualiza a página. Outras propriedades CSS são mais complexas e só funcionarão em determinadas circunstâncias.
O atributo Z-index pertence ao último grupo mencionado acima. O índice Z sem dúvida causa confusão (compatibilidade) e frustração (psicologia do desenvolvedor) com mais frequência do que qualquer outro atributo. Mas o engraçado é que, uma vez que você realmente entenda o índice Z, descobrirá que é uma propriedade muito fácil de usar e fornecerá uma ajuda poderosa na solução de muitos desafios de layout.
Neste artigo, explicaremos exatamente o que é o índice Z, por que ele é tão mal compreendido e discutiremos algumas questões práticas relacionadas ao seu uso. Também descreveremos algumas das diferenças entre navegadores que você encontrará, que são problemas exclusivos que existem nas versões existentes do IE e do Firefox. Essa perspectiva abrangente sobre o atributo Z-index fornecerá aos desenvolvedores uma boa base de confiança e ajuda poderosa ao usar o atributo Z-index.
O que é isso?
O atributo Z-index determina o nível de empilhamento de um elemento HTML. O nível de empilhamento de um elemento é relativo à posição do elemento no eixo Z (em oposição ao eixo X ou eixo Y). Um valor de índice Z mais alto significa que o elemento estará mais próximo do topo na ordem de empilhamento. Esta sequência de camadas é apresentada ao longo dos eixos verticais da rosca.
Para dar uma imagem mais clara de como funciona o índice Z, a imagem acima exagera o posicionamento visual dos elementos empilhados.
sequência de camadas naturais
Em uma página HTML, a ordem natural de empilhamento (ou seja, a ordem dos elementos no eixo Z) é determinada por vários fatores. A seguir está uma lista que exibe os itens da lista em um contexto de empilhamento (nenhuma tradução adequada em chinês foi encontrada ainda, ela deve se referir ao ambiente de empilhamento onde os elementos empilhados estão localizados. Esses itens estão neste contexto de empilhamento). do meio ambiente. Nenhum dos itens nesta lista recebeu um atributo de índice Z.
O plano de fundo e a borda do elemento criam um contexto de empilhamento
Citar:
·Os elementos de contexto de empilhamento com valores negativos são organizados na ordem de aparecimento (quanto mais recente o nível, mais alto ele é)
·Elementos em nível de bloco que não estão posicionados ou flutuados são organizados na ordem de aparência.
·Elementos flutuantes e não posicionados são organizados na ordem de aparência.
·Os elementos embutidos são organizados na ordem de aparição.
·Os elementos posicionados são organizados na ordem de aparição.
A propriedade Z-index, quando usada corretamente, altera a ordem natural de empilhamento.
É claro que a ordem de empilhamento dos elementos não é particularmente óbvia, a menos que tenham sido posicionados de forma a sobreporem-se uns aos outros. Abaixo, é mostrada uma CAIXA com margens negativas para ilustrar a sequência natural de empilhamento.
A CAIXA acima é definida com diferentes cores de fundo e borda, sendo que as duas últimas são escalonadas e definem uma margem superior negativa, para que possamos ver a ordem natural de empilhamento. A CAIXA cinza está em primeiro lugar na marca, a CAIXA azul está em segundo lugar e a dourada está em terceiro lugar. As margens negativas aplicadas indicam claramente o fato de que esses elementos não possuem um conjunto de propriedades de índice Z; sua ordem de empilhamento é natural ou a regra composta padrão; O fenômeno do entrelaçamento é causado por margens negativas.