[Navegadores participantes do teste: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[Sistema operacional: Windows]
Parece que muitos estudantes 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 definam o índice z, eles não podem estar no topo. diarréia, náusea e insônia, e acabam deprimidos, por isso não ousam usar sobreposição de camadas à vontade. 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.
Primeiramente, esclareça alguns conceitos que precisam ser utilizados no artigo:
1. Posicionamento estático: position:static (o valor padrão do atributo position).
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 o elemento.
5. Elementos irmãos: elementos que possuem um elemento pai comum.
[Nota] Esses conceitos são customizados pelo autor e são usados apenas neste artigo.
O elemento peer é uma palavra-chave e precisa ser explicada em detalhes aqui.
| A seguir está o conteúdo citado: <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 têm o mesmo pai div#f podem ser chamados de "elementos irmãos".