Inicio>Tutorial de diseño web>Tutorial CSS

Cinco reglas de superposición

Autor：Eve Cole Fecha de actualización：2009-06-12 17:53:18

[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 configuren el índice z, no pueden obtenerlo. hasta la cima Sufren de vómitos y diarrea, náuseas e insomnio, y terminan deprimidos. 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 este 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 principal: el elemento ancestro que contiene directamente este elemento.
  5. Elementos hermanos: elementos que comparten un elemento principal común.

Nota: Estos conceptos han sido personalizados por el autor y se utilizan únicamente en este artículo.

Cita:

El elemento par es una palabra muy clave y debe explicarse en detalle aquí.

<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".

Fin

de la cita

Echemos un vistazo a estas cinco reglas :

Regla 1: cuando los elementos hermanos se colocan de la misma manera y no hay una configuración de índice z, el html se colocará encima de este último.

Ejecutar cuadro de código

[Ctrl+A selecciona todos los consejos: primero puedes modificar algún código]

Regla 2: cuando los elementos hermanos están ubicados dinámicamente y tienen configuraciones de índice z, el que tenga el valor de índice z mayor aparecerá primero.

Ejecutar cuadro de código

[Ctrl+A Todos los consejos de selección: primero puede modificar parte del código]

Regla 3: cuando los elementos hermanos se colocan de diferentes maneras, colóquelos dinámicamente en la parte superior.

Ejecutar cuadro de código

[Ctrl+A Todos los consejos de selección: primero puede modificar parte del código]

Regla 4: cuando los elementos que no son hermanos, cualquiera de ellos y su elemento ancestro no tienen un diseño dinámico, el html tendrá prioridad.

Ejecutar cuadro de código

[Ctrl+A selecciona todos los consejos: primero puedes modificar algún código]

Regla 5 : [Importante] Cuando cualquiera de los elementos que no son hermanos o su elemento ancestro tiene posicionamiento dinámico, busque hacia arriba el elemento ancestro posicionado dinámicamente al mismo tiempo y extraiga el elemento ancestro de nivel más alto (o él mismo) para comparación. .

Caso 1: No importa qué tan grande sea el índice z del elemento secundario, el elemento principal más grande será lo primero.

Caso 2: el elemento principal se coloca en la parte inferior y el elemento secundario también se puede colocar en la parte superior.

El caso 1 y el caso 2 se combinan con una comparación ampliada.


Ejecutar cuadro de código

[Ctrl+A Todos los consejos de selección: primero puede modificar parte del código]

Cita:

De hecho, los primeros cuatro puntos son los básicos, solo el quinto punto es más difícil de entender Aquí hay una explicación detallada:

<div id=. "ab" estilo="posición: absoluta;">
<div id="a" estilo="posición:relativa; índice z:100;">
<div id="a_inner1">
<div id="a_inner2">
<div id="a_inner3" style="posición:relativa; índice z: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="posición:relativa; índice z:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>

En este ejemplo, comparamos la relación en cascada entre div#a_inner5 y div#b_inner4.
Hasta el siguiente nivel del elemento ancestro div#ab que comparten, los elementos ancestros de div#a_inner5 incluyen: div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4 el ancestro de div#b_inner4; Los elementos incluyen: div#b,div#b_inner1,div#b_inner2,div#b_inner3.
Luego analice los elementos con posicionamiento dinámico entre sus elementos ancestros: los elementos con posicionamiento dinámico entre los elementos ancestros de div#a_inner5 son: div#a, div#a_inner3 los elementos con posicionamiento dinámico entre los elementos ancestros de div#b_inner4 son: div#b_inner3.
Luego saque el nivel más alto para comparar: div#a > #div#b_inner3.

Cuando el elemento principal está en la parte inferior y el elemento secundario también puede estar en la parte superior, se utiliza el elemento no hermano. Cuando el elemento ancestro tiene un diseño dinámico, su comparación no tiene nada que ver con la posición: estática, sino con su ancestro. El elemento se puede comparar a través de la posición de html.

Fin de la cita

Por supuesto, a veces hay casos especiales, como flash y select en IE6, que no se pueden cubrir. Estas son situaciones anormales. Puede buscar artículos relevantes usted mismo.
Artículos relacionados