[Los navegadores que participan en la prueba: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2] Parece que muchos estudiantes están confundidos acerca de por qué este DIV está en el nivel superior y que Div está en el nivel inferior. , haciendo que no use la superposición de capas a voluntad. Sin embargo, el efecto de superposición de las capas aparece con frecuencia en el diseño interactivo, por lo que debemos controlarlo. Primero, aclaremos algunos conceptos que deben usarse en el artículo : Posicionamiento estático: Posición: estática (el valor predeterminado de la propiedad de posición). Posicionamiento dinámico: posición: relativo o posición: absoluto o posición: fijo. Elemento Ancestor: cualquier elemento que contenga este elemento. Elemento principal: el elemento ancestro que contiene directamente el elemento. Elemento par: un elemento con un elemento principal común. NOTA: Estos conceptos son personalizados por el autor y solo se usan en este artículo. Cita: El elemento par es una palabra muy crítica, y debe explicarse en detalle aquí. <div> En este ejemplo, Div#A y Div#B no son "elementos simultáneos". Fin de la cita Echemos un vistazo a estas cinco reglas : Regla 1: Cuando el método de posicionamiento de los elementos pares es el mismo y no hay configuración de índice Z, HTML se basa en este último. Ejecutar el cuadro de código Regla 2: Cuando los mismos elementos están posicionados dinámicamente y hay una configuración de índice Z, la que tiene el mayor valor del índice Z es la parte superior. Ejecutar el cuadro de código Regla 3: Los métodos de posicionamiento de los elementos pares son diferentes, y el posicionamiento dinámico es la principal prioridad. Ejecutar el cuadro de código Regla 4: Cuando los elementos no simultáneos, cualquiera y sus elementos ancestrales no tienen un diseño dinámico, HTML depende de este último. Ejecutar el cuadro de código Regla 5 : [importante] Cuando cualquiera de los elementos no simultáneos tenga posicionamiento dinámico, cada uno de ellos buscará los elementos ancestrales de posicionamiento dinámico hacia arriba, y cada uno de ellos eliminará el nivel más alto de elementos ancestrales (o ellos mismos) para comparar . Caso 1: No importa cuán grande sea el índice Z del elemento infantil, mayor es el elemento principal. Caso 2: El elemento principal es más bajo y el elemento infantil también puede ser más alto. Caso 1, caso 2 combinado con comparación extendida. Ejecutar el cuadro de código Cita: De hecho, los primeros cuatro puntos son básicos, y solo el quinto punto es difícil de entender. <div id = "ab" estilo = "posición: absoluto;"> En este ejemplo, comparemos la relación en cascada entre div#a_inner5 y div#b_inner4. Cuando el elemento principal es más bajo y el elemento infantil también puede ser más alto, es usar elementos que no sean de peinados cuando el elemento ancestro tiene un diseño dinámico, su comparación no tiene nada que ver con la posición: estática, pero su elemento ancestro se puede comparar a través de la posición HTML. Fin de la cita Por supuesto, a veces hay casos especiales, como Flash, y seleccionados en IE6 que no se pueden bloquear.
[Sistema operativo: Windows]
<div> </div>
<div id = "a"> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div id = "f">
<div> </div>
<div id = "b"> </div>
<div id = "c"> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
[CTRL+A TODOS SELECCIÓN SELECCIONES: puede modificar algunos códigos primero]
[CTRL+A TODOS SELECCIÓN SELECCIONES: puede modificar algunos códigos primero]
[CTRL+A TODOS SELECCIÓN SELECCIONES: puede modificar algunos códigos primero]
[CTRL+A TODOS SELECCIÓN SELECCIONES: puede modificar algunos códigos primero]
[CTRL+A TODOS SELECCIÓN SELECCIONES: puede modificar algunos códigos primero]
<div id = "a" estilo = "posición: relativo; z-índice: 100;">
<div id = "a_inner1">
<div id = "a_inner2">
<div id = "a_inner3" style = "Posición: relativo; z-índice: 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: relativo; z-índice: 99;">
<div id = "b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
Hasta el siguiente nivel del elemento del antepasado Div#AB, los elementos del antepasado de Div#a_inner5 incluyen: Div#A, Div#A_inner1, Div#A_inner2, Div#A_inner3, Div#A_inner4; Div#B, div#B_inner1, div#b_inner2, div#b_inner3.
Luego, analice sus elementos ancestrales que tienen posicionamiento dinámico: los elementos ancestrales de Div#A_inner5 que contienen posicionamiento dinámico son: Div#A, Div#a_inner3;
Luego saque el nivel más alto para comparar: Div#A>#div#B_inner3.