Page d'accueil>Tutoriel de conception de sites Web>Tutoriel CSS

Cinq règles de superposition

Auteur：Eve Cole Date de mise à jour：2009-06-12 17:53:18

[Navigateurs participant au test : IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[Système d'exploitation : Windows]

Il semble que de nombreux étudiants soient obsédés par le problème de savoir pourquoi ce div est sur la couche supérieure et ce div sur la couche inférieure, et peu importe la façon dont ils définissent l'index z, ils ne peuvent pas obtenir jusqu'au sommet. Ils souffrent de vomissements et de diarrhée, de nausées et d'insomnie, et finissent par être déprimés. N'hésitez pas à utiliser des superpositions de couches. Cependant, l’effet de superposition de couches apparaît fréquemment dans la conception d’interactions, il faut donc le contrôler. Pour le contrôler, il faut maîtriser ses lois.

Tout d'abord, clarifions quelques concepts qui doivent être utilisés dans cet article :

  1. positionnement statique : position:static (la valeur par défaut de l'attribut position).
  2. Positionnement dynamique : position : relative ou position : absolue ou position : fixe.
  3. Élément ancêtre : tout élément qui contient cet élément.
  4. Élément parent : élément ancêtre qui contient directement cet élément.
  5. Éléments frères : éléments qui partagent un élément parent commun.

Remarque : Ces concepts sont personnalisés par l'auteur et sont utilisés uniquement dans cet article.

Citation :

L'élément pair est un mot très clé et doit être expliqué en détail ici.

<div>
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<identifiant div="f">
<div></div>
<div id="b"></div>
<div id="c"></div>
<div></div>
<div></div>
<div></div>
</div>

Dans cet exemple, div#a et div#b ne sont pas des "éléments frères". Seuls les éléments comme div#b et div#c qui ont le même parent div#f peuvent être appelés "éléments frères".

Fin

de citation

Regardons ces cinq règles :

Règle 1 : Lorsque les éléments frères sont positionnés de la même manière et qu'il n'y a pas de paramètre z-index, le html sera placé au-dessus de ce dernier.

Boîte de code d'exécution

[Ctrl+A sélectionne tous les conseils : vous pouvez d'abord modifier du code]

Règle 2 : lorsque des éléments frères sont tous deux positionnés dynamiquement et ont des paramètres d'index z, celui avec la valeur d'index z la plus grande viendra en premier.

Boîte de code d'exécution

[Ctrl+A Tous les conseils de sélection : Vous pouvez d'abord modifier une partie du code]

Règle 3 : Lorsque des éléments frères sont positionnés de différentes manières, positionnez-les dynamiquement en haut.

Boîte de code d'exécution

[Ctrl+A Tous les conseils de sélection : Vous pouvez d'abord modifier une partie du code]

Règle 4 : Lorsque des éléments non frères, l'un d'entre eux et son élément ancêtre n'ont pas de mise en page dynamique, le html aura priorité.

Boîte de code d'exécution

[Ctrl+A sélectionne tous les conseils : vous pouvez d'abord modifier du code]

Règle 5 : [Important] Lorsque l'un des éléments non frères ou son élément ancêtre a un positionnement dynamique, recherchez vers le haut l'élément ancêtre positionné dynamiquement en même temps et supprimez l'élément ancêtre de plus haut niveau (ou lui-même) pour comparaison. .

Cas 1 : Quelle que soit la taille du z-index de l’élément enfant, l’élément parent le plus grand viendra en premier.

Cas 2 : L'élément parent est placé en bas, et l'élément enfant peut également être placé en haut.

Les cas 1 et 2 sont combinés avec une comparaison étendue.


Boîte de code d'exécution

[Ctrl+A Tous les conseils de sélection : Vous pouvez d'abord modifier une partie du code]

Citation :

En fait, les quatre premiers points sont les bases, seul le cinquième point est plus difficile à comprendre Voici une explication détaillée :

<div id=. "ab" style="position : absolue;">
<div id="a" style="position:relative; z-index:100;">
<div id="a_inner1">
<div id="a_inner2">
<div id="a_inner3" style="position:relative; z-index:98;">
<div id="a_inner4">
<div id="a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<identifiant div="b">
<div id="b_inner1">
<div id="b_inner2">
<div id="b_inner3" style="position:relative; z-index:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>

Dans cet exemple, nous comparons la relation en cascade entre div#a_inner5 et div#b_inner4.
Jusqu'au niveau suivant de l'élément ancêtre div#ab qu'ils partagent, les éléments ancêtres de div#a_inner5 incluent : div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4 ; Les éléments incluent : div#b,div#b_inner1,div#b_inner2,div#b_inner3.
Analysez ensuite les éléments à positionnement dynamique parmi leurs éléments ancêtres : les éléments à positionnement dynamique parmi les éléments ancêtres de div#a_inner5 sont : div#a, div#a_inner3 ; les éléments à positionnement dynamique parmi les éléments ancêtres de div#b_inner4 sont : div#b_inner3.
Retirez ensuite le niveau le plus élevé pour comparaison : div#a > #div#b_inner3.

Lorsque l'élément parent est en bas et que l'élément enfant peut également être en haut, l'élément non frère est utilisé. Lorsque l'élément ancêtre a une disposition dynamique, sa comparaison n'a rien à voir avec position:static, mais avec son ancêtre. L'élément peut être comparé via la position de html.

Fin du devis

Bien sûr, il existe parfois des cas particuliers, tels que Flash et Select dans IE6, qui ne peuvent pas être couverts. Ce sont des situations anormales. Vous pouvez rechercher vous-même les articles pertinents.
Articles connexes