[Navegadores que participam do teste: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2] Parece que muitos estudantes estão confusos sobre por que essa div está no nível superior e que a div está no nível mais baixo. , fazendo com que você não use a superposição de camadas à vontade. No entanto, o efeito da superposição das camadas aparece com frequência no design interativo, por isso devemos controlá -lo. Primeiro, vamos esclarecer alguns conceitos que precisam ser usados no artigo : Posicionamento estático: Posição: estática (o valor padrão da propriedade de posição). Posicionamento dinâmico: Posição: Relativo ou Posição: Absoluto ou Posição: Corrigido. Elemento ancestral: qualquer elemento que contenha esse elemento. Elemento pai: o elemento ancestral que contém diretamente o elemento. Elemento de pares: um elemento com um elemento pai comum. Nota: Esses conceitos são personalizados pelo autor e são usados apenas neste artigo. Citar: O elemento par é uma palavra muito crítica e precisa ser explicada em detalhes aqui. <div> Neste exemplo, o DIV#A e o DIV#B não são "elementos simultâneos". Fim da citação Vamos dar uma olhada nessas cinco regras : Regra 1: Quando o método de posicionamento dos elementos dos colegas é o mesmo e não há configuração do índice z, o HTML depende deste último. Execute a caixa de código Regra 2: Quando os mesmos elementos estão posicionados dinamicamente e há uma configuração de índice z, aquele com o maior valor do índice z é o topo. Execute a caixa de código Regra 3: Os métodos de posicionamento dos elementos dos pares são diferentes e o posicionamento dinâmico é a prioridade superior. Execute a caixa de código Regra 4: Quando elementos não simultâneos, todos e seus elementos ancestrais não têm layout dinâmico, o HTML depende deste último. Execute a caixa de código Regra 5 : [IMPORTANTE] Quando qualquer um dos elementos não simultâneos têm posicionamento dinâmico, cada um deles procurará os elementos ancestrais de posicionamento dinâmico para cima, e cada um deles retirará o mais alto nível de elementos ancestrais (ou eles mesmos) para comparação . Caso 1: Não importa o tamanho do índice Z do elemento filho, maior o elemento pai. Caso 2: O elemento pai é menor e o elemento filho também pode ser maior. Caso 1, caso 2 combinado com comparação prolongada. Execute a caixa de código Citar: De fato, os quatro primeiros pontos são todos básicos, e apenas o quinto ponto é difícil de entender. <div id = "ab" style = "posição: absoluto;"> Neste exemplo, vamos comparar a relação em cascata entre div#a_inner5 e div#b_inner4. Quando o elemento pai é mais baixo e o elemento filho também pode ser maior, é usar elementos não-parecidos quando o elemento ancestral tem um layout dinâmico, sua comparação não tem nada a ver com posição: estática, mas seu elemento ancestral pode ser comparado Através da posição HTML. Fim da citação Obviamente, às vezes existem casos especiais, como o Flash e o IE6 que não podem ser bloqueados.
[Sistema operacional: Windows]
<div> </div>
<div id = "a"> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div id = "f">
<div> </div>
<div id = "b"> </div>
<div id = "c"> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
[Ctrl+A todas as dicas de seleção: você pode modificar alguns códigos primeiro]
[Ctrl+A todas as dicas de seleção: você pode modificar alguns códigos primeiro]
[Ctrl+A todas as dicas de seleção: você pode modificar alguns códigos primeiro]
[Ctrl+A todas as dicas de seleção: você pode modificar alguns códigos primeiro]
[Ctrl+A todas as dicas de seleção: você pode modificar alguns códigos primeiro]
<div id = "A" style = "Posição: relativo; Z-Index: 100;">>
<div id = "a_inner1">
<div id = "a_inner2">
<div id = "a_inner3" style = "posição: relativa; z-index: 98;">
<div id = "a_inner4">
<div id = "a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "b">
<div id = "b_inner1">
<div id = "b_inner2">
<div id = "b_inner3" style = "posição: relativa; z-index: 99;">
<div id = "b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
Até o próximo nível do elemento ancestral div#AB, os elementos ancestrais de div#a_inner5 incluem: div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4; div#B, div#B_inner1, div#B_inner2, div#B_inner3.
Em seguida, analise seus elementos ancestrais que possuem posicionamento dinâmico: DIV#A_INNER5 Os elementos ancestrais que contêm posicionamento dinâmico são: Div#A, DIV#A_INNER3;
Em seguida, retire o nível mais alto a ser comparado: div#a>#div#b_inner3.