[Browsers participant au test: IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2] Il semble que de nombreux étudiants soient confus sur la raison pour laquelle cette div est au niveau supérieur et que la div est au niveau inférieur. , vous obligeant à ne pas utiliser la superposition de couches à volonté. Cependant, l'effet de superposition des couches apparaît fréquemment dans la conception interactive, nous devons donc le contrôler. Tout d'abord, clarifions quelques concepts qui doivent être utilisés dans l'article : Positionnement statique: position: statique (la valeur par défaut de la propriété de position). Positionnement dynamique: position: relative ou position: absolue ou position: fixe. Élément ancêtre: tout élément qui contient cet élément. Élément parent: l'élément ancêtre qui contient directement l'élément. Élément homologue: un élément avec un élément parent commun. Remarque: Ces concepts sont personnalisés par l'auteur et ne sont utilisés que dans cet article. Citation: L'élément homologue est un mot très critique, et il doit être expliqué en détail ici. <div> Dans cet exemple, Div # A et Div # B ne sont pas des "éléments simultanés". Fin de citation Jetons un coup d'œil à ces cinq règles : Règle 1: Lorsque la méthode de positionnement des éléments de pair est la même et qu'il n'y a pas de paramètre Z-Index, HTML s'appuie sur ce dernier. Exécutez la case de code Règle 2: Lorsque les mêmes éléments sont tous deux positionnés dynamiquement et qu'il y a un réglage de l'indice Z, celui avec la plus grande valeur d'indice Z est le haut. Exécutez la case de code Règle 3: Les méthodes de positionnement des éléments de pair sont différentes et le positionnement dynamique est la priorité maximale. Exécutez la case de code Règle 4: Lorsque des éléments non simultanés, tous les éléments ancestraux n'ont pas de disposition dynamique, HTML s'appuie sur ce dernier. Exécutez la case de code Règle 5 : [Important] Lorsque l'un des éléments non simultanés a un positionnement dynamique, chacun d'eux cherchera le positionnement dynamique des éléments ancestraux vers le haut, et chacun d'eux éliminera le plus haut niveau d'éléments ancestraux (ou eux-mêmes) pour comparaison . Cas 1: Peu importe la taille de l'indice z de l'élément enfant, plus l'élément parent est grand. Cas 2: L'élément parent est inférieur et l'élément enfant peut également être plus élevé. Cas 1, cas 2 combiné avec une comparaison prolongée. Exécutez la case de code Citation: En fait, les quatre premiers points sont tous basiques, et seul le cinquième point est difficile à comprendre. <div id = "ab" style = "position: absolu;"> Dans cet exemple, comparons la relation en cascade entre div # a_inner5 et div # b_inner4. Lorsque l'élément parent est inférieur et que l'élément enfant peut également être plus élevé, il s'agit d'utiliser des éléments non peer lorsque l'élément d'ancêtre a une disposition dynamique, sa comparaison n'a rien à voir avec la position: statique, mais son élément ancêtre peut être comparé à travers la position HTML. Fin de citation Bien sûr, il y a parfois des cas spéciaux, tels que Flash, et Sélectionnez dans IE6 qui ne peuvent pas être bloqués.
[Système d'exploitation: 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 tous les conseils de sélection: vous pouvez d'abord modifier certains codes]
[Ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier certains codes]
[Ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier certains codes]
[Ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier certains codes]
[Ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier certains codes]
<div id = "a" style = "position: relatif; z-index: 100;">
<div id = "a_inner1">
<div id = "a_inner2">
<div id = "a_inner3" style = "position: relatif; z-index: 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 = "position: relatif; z-index: 99;">
<div id = "b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
Jusqu'à ce que le niveau d'ancêtre div # AB, les éléments ancêtres de Div # a_inner5 incluent: 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.
Ensuite, analysez leurs éléments ancestraux qui ont un positionnement dynamique: les éléments ancestraux de Div # A_inner5 qui contiennent un positionnement dynamique sont: div # a, div # a_inner3; div # b_inner4 les éléments ancestraux qui contiennent un positionnement dynamique sont: div # b_inner3.
Ensuite, retirez le plus haut niveau à comparer: div # a> # div # b_inner3.