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 :

posicionamiento estático: posición: estática (el valor predeterminado del atributo de posición).
Posicionamiento dinámico: posición:relativa o posición:absoluta o posición:fija.
Elemento antepasado: cualquier elemento que contenga este elemento.
Elemento principal: el elemento ancestro que contiene directamente este elemento.
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í.

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.

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.

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

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.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="autor" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>Regla 5: Elementos no hermanos, cualquiera o su antepasado Cuando un elemento tiene posicionamiento dinámico, busca hacia arriba el elemento ancestro posicionado dinámicamente y saca el elemento ancestro de nivel más alto (o él mismo) para comparar. </title> </head> <style type="text/css"> div { font:12px/1.5 arial;} div strong { color:#fff; display:inline-block;} h3 strong { color:#f00;} /*--- Definir la forma del bloque---*/ .div1, .div2 { height:70px; width:150px; .grandDiv1, .grandDiv2 { relleno:10px; borde:1px sólido #060; ancho:174px; fondo:#cf9; #fcf; } /*--- Definir la posición de desplazamiento del cuadrado y la posición del texto---*/ .grandDiv2 { margin-top:-50px; margin-left:95px } .parentDiv2 { margin-top:-40px; -izquierda: 85px; } .div2 { margen superior: -20px; margen izquierdo: 75px; relleno-superior: 30px; altura: 40px } .grandDiv2 .parentDiv2, .grandDiv2 .div2 .div2 { margen: 0;} </style> <body> <h3>Regla 5<strong>(Importante)</strong>: Cuando cualquiera de los elementos que no son hermanos o su elemento ancestro tiene un posicionamiento dinámico, cada uno de ellos buscará busque el elemento ancestro posicionado dinámicamente al siguiente nivel del elemento ancestro y saque el elemento ancestro del nivel más alto (o él mismo) para comparar. </h3> <p>Caso 1: No importa qué tan grande sea el índice z del elemento secundario, el elemento principal más grande aparecerá primero. <p> <div class="parentDiv1" style="position:relative; z-index:2;"> .parentDiv1{position:relative;<strong>z-index:2</strong>} <div class=" div1">.div1{position:static}</div> </div> <div class="parentDiv2" style="position:relative; z-index:1;"> <div class="div2" style=" posición:relativa; índice z:10000;">.div2{posición:relativa;<strong>índice z:10000</strong>}</div> .parentDiv2{posición:relativa;<strong>índice z: 1</strong>} </div> <p>Caso 2: El elemento padre está en la parte inferior y el elemento hijo también puede estar en la parte superior. <p> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative;">.div1{position:relative}</div> </div> < div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc} </div> <p>Caso 1 y caso 2 combinados con comparación extendida. <p> <div class="grandDiv1" style="posición:relativa; z-index:3;"> .grandDiv1{posición:relativa;<strong>z-index:3</strong>} <div class=" parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong >}</div> </div> </div> <div class="grandDiv2"> <div class="parentDiv2" style="position:relative; z-index:4;"> <div class="div2 ">.div2{posición:staitc}</div> .parentDiv2{posición:relativa;<strong>z-index:4</strong>} </div> .grandDiv2{posición:static;} </div> < /cuerpo></html>
[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:

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.