Analyser l'ordre d'empilement des éléments en CSS

• Lorsque l'attribut z-index et l'attribut position ne sont pas inclus, l'ordre d'empilement de tous les éléments est le même comme celui du document HTML. L'ordre d'apparition est le même. (Sauf le cas particulier de l'utilisation de marges négatives pour chevaucher des éléments en ligne.)

• Lorsque l'élément est flottant, l'élément bloc flottant est placé entre l'élément bloc non positionné et l'élément bloc positionné. élément de bloc. En d’autres termes, les éléments flottants apparaissent au-dessus des éléments de bloc descendants dans le flux normal et au-dessous des éléments en ligne descendants dans le flux normal. Lorsque l'attribut position est ajouté à l'élément

• , tous les éléments avec l'attribut position et leurs sous-éléments seront affichés au-dessus des autres éléments sans l'attribut position.

• z-index n'est efficace que sur les éléments avec l'attribut position défini L'attribut z-index sur les éléments sans l'attribut position ne prend pas effet.

L'attribut z-index génère un contexte d'empilement

Un groupe d'éléments avec un élément parent commun qui sont déplacés vers l'avant ou vers l'arrière ensemble forment un contexte d'empilement . Chaque contexte d'empilement possède un seul élément racine. Lorsqu'un nouveau contexte d'empilement est formé sur l'élément, tous les éléments enfants du contexte d'empilement sont limités à une zone fixe dans l'ordre d'empilement. Un contexte d'empilement forme un tout et ses éléments internes ont des ordres d'empilement relativement différents. Cependant, par rapport à d'autres contextes d'empilement, ils ne peuvent être déplacés que dans leur ensemble.

En termes simples, si un élément est placé au bas de son contexte d'empilement, il n'y a aucun moyen de l'afficher au-dessus d'un autre élément de contexte d'empilement de niveau supérieur, même s'il est z-index. mis à l’infini.

Règles de construction du contexte d'empilement

• L'élément racine du document

• a l'attribut position ( à l'exception de l'attribut static), et définissez également l'attribut z-index sur auto. L'élément

• a l'attribut opacité et la valeur est inférieure à 1.

• Certains nouveaux attributs CSS, tels que le filtre, les régions CSS et d'autres attributs nécessitant un rendu hors écran, peuvent permettre aux éléments de former un contexte d'empilement.

• Pour les éléments qui spécifient position:fixed, le z-index technique est automatique

L'ordre d'empilement des sous-éléments au sein du même empilement context

De bas en haut (root < -index < index-aotu < +index < position) :

1. L'élément racine du contexte d'empilement .

2. a l'attribut position défini, et l'élément avec un z-index négatif et ses sous-éléments, l'élément avec une valeur d'index z plus grande est placé au-dessus de l'élément plus petit, et les éléments avec la même valeur d'attribut Les éléments sont empilés dans l'ordre dans lequel ils apparaissent dans le code HTML.

3. Il n'y a aucun élément avec une position définie.

4. a l'attribut de position défini et l'attribut z-index est auto

5. a l'attribut de position défini et le z-index. l'attribut est auto Éléments de valeur positive.

Cas de différents contextes d'empilement

• Les contextes d'empilement peuvent intégrer d'autres contextes d'empilement.

• Chaque contexte d'empilement et son contexte de statistiques sont indépendants.

• Les sous-éléments dans le contexte d'empilement sont placés dans l'ordre mentionné ci-dessus.

• Le z-index d'un contexte d'empilement enfant à l'intérieur d'un contexte d'empilement n'a de sens que dans le contexte d'empilement parent.

Quel domaine de connaissances profond et rarement exploré Appliquez lentement le résumé dans la pratique !

[Recommandations associées]

1.Tutoriel vidéo CSS en ligne gratuit

2 Manuel CSS en ligne

3. php.cn Dugu Jiujian (2)-tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!