[Navegadores que participan en la prueba: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[Sistema operativo: Windows]
Parece que muchos estudiantes están obsesionados con el problema de por qué este div está en la capa superior y ese div está en la capa inferior, y no importa cómo establezcan el índice z, no pueden estar en la parte superior. Sufren vómitos y diarrea, náuseas e insomnio, y terminan deprimidos, por lo que no se atreven a usar capas superpuestas a voluntad. Sin embargo, el efecto de superposición de capas aparece con frecuencia en el diseño de interacción, por lo que debemos controlarlo. Para controlarlo debemos dominar sus leyes.
Primero, aclare algunos conceptos que deben usarse en el artículo:
1. Posicionamiento estático: posición: estática (el valor predeterminado del atributo de posición).
2. Posicionamiento dinámico: posición:relativa o posición:absoluta o posición:fija.
3. Elemento antepasado: cualquier elemento que contenga este elemento.
4. Elemento padre: el elemento ancestro que contiene directamente el elemento.
5. Elementos hermanos: elementos que tienen un elemento padre común.
[Nota] Estos conceptos han sido personalizados por el autor y se utilizan únicamente en este artículo.
El elemento par es una palabra muy clave y debe explicarse en detalle aquí.
| El siguiente es el contenido 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> <div id="c"></div> <div></div> <div></div> <div></div> </div> |
En este ejemplo, div#a y div#b no son "elementos hermanos". Sólo los elementos como div#b y div#c que tienen el mismo div#f padre pueden denominarse "elementos hermanos".