Página Inicial>Tutorial de web design>Tutorial CSS

Cinco regras de superposição

Autor：Eve Cole Data da Última Atualização：2009-06-12 17:53:18

[Navegadores participantes do teste: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[Sistema operacional: Windows]

Parece que muitos alunos estão obcecados com o problema de por que esse div está na camada superior e aquele div está na camada inferior, e não importa como eles definem o índice z, eles não conseguem obter para o topo. Eles sofrem de vômitos e diarréia, náuseas e insônia, e acabam deprimidos. Porém, o efeito de sobreposição de camadas aparece frequentemente no design de interação, por isso devemos controlá-lo. Para controlá-lo, devemos dominar suas leis.

Primeiro, esclareça alguns conceitos que precisam ser usados ​​neste artigo :

  1. posicionamento estático: posição:estático (o valor padrão do atributo posição).
  2. Posicionamento dinâmico: posição:relativa ou posição:absoluta ou posição:fixa.
  3. Elemento ancestral: qualquer elemento que contenha este elemento.
  4. Elemento pai: o elemento ancestral que contém diretamente este elemento.
  5. Elementos irmãos: elementos que compartilham um elemento pai comum.

Nota: Esses conceitos são customizados pelo autor e são usados ​​apenas neste artigo.

Citação:

O elemento peer é uma palavra-chave e precisa ser explicada em detalhes aqui.

<div>
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<divid="f">
<div></div>
<div id="b"></div>
<divid="c"></div>
<div></div>
<div></div>
<div></div>
</div>

Neste exemplo, div#a e div#b não são "elementos irmãos". Somente elementos como div#b e div#c que possuem o mesmo pai div#f podem ser chamados de "elementos irmãos".

Fim

da citação

Vamos dar uma olhada nestas cinco regras :

Regra 1: Quando os elementos irmãos são posicionados da mesma maneira e não há configuração de índice z, o html será colocado em cima deste último.

Execute a caixa de código

[Ctrl+A selecionar todas as dicas: você pode modificar algum código primeiro]

Regra 2: Quando os elementos irmãos são posicionados dinamicamente e possuem configurações de índice z, aquele com o valor de índice z maior virá primeiro.

Execute a caixa de código

[Ctrl+A Todas as dicas de seleção: você pode modificar parte do código primeiro]

Regra 3: Quando os elementos irmãos são posicionados de maneiras diferentes, posicione-os dinamicamente no topo.

Execute a caixa de código

[Ctrl+A Todas as dicas de seleção: Você pode modificar parte do código primeiro]

Regra 4: Quando elementos não irmãos, qualquer um deles e seu elemento ancestral não possuem layout dinâmico, o html terá precedência.

Execute a caixa de código

[Ctrl+A selecionar todas as dicas: você pode modificar algum código primeiro]

Regra 5 : [Importante] Quando qualquer um dos elementos não-irmãos ou seu elemento ancestral tiver posicionamento dinâmico, pesquise para cima o elemento ancestral posicionado dinamicamente ao mesmo tempo e retire o elemento ancestral de nível mais alto (ou ele mesmo) para comparação.

Caso 1: Não importa quão grande seja o índice z do elemento filho, o elemento pai maior virá primeiro.

Caso 2: O elemento pai é colocado na parte inferior e o elemento filho também pode ser colocado na parte superior.

O caso 1 e o caso 2 são combinados com comparação estendida.


Execute a caixa de código

[Ctrl+A Todas as dicas de seleção: Você pode modificar parte do código primeiro]

Citação:

Na verdade, os primeiros quatro pontos são básicos, apenas o quinto ponto é mais difícil de entender. Aqui está uma explicação detalhada:

<div id=. "ab" style="posição: absoluto;">
<div id="a" style="posição:relativa; 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>
<divid="b">
<div id="b_inner1">
<div id="b_inner2">
<div id="b_inner3" style="posição:relativa; índice z:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>

Neste exemplo, comparamos o relacionamento em cascata entre div#a_inner5 e div#b_inner4.
Até o próximo nível do elemento ancestral div#ab que eles compartilham, os elementos ancestrais de div#a_inner5 incluem: div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4; Os elementos incluem: div#b,div#b_inner1,div#b_inner2,div#b_inner3.
Em seguida analise os elementos com posicionamento dinâmico entre seus elementos ancestrais: os elementos com posicionamento dinâmico entre os elementos ancestrais de div#a_inner5 são: div#a, div#a_inner3 são: div#b_inner3.
Em seguida, retire o nível mais alto para comparação: div#a > #div#b_inner3.

Quando o elemento pai está na parte inferior e o elemento filho também pode estar no topo, o elemento não-irmão é usado. Quando o elemento ancestral tem um layout dinâmico, sua comparação não tem nada a ver com position:static, mas com seu ancestral. elemento pode ser comparado através da posição de html.

Fim da cotação

Claro, às vezes há casos especiais, como flash e seleção no IE6, que não podem ser abordados. Essas são situações anormais.
Artigos Relacionados