Maîtriser l'index z dans CSS

Attribut Z-Index dans CSS: Un outil puissant pour contrôler l'ordre des éléments de page empiler

Cet article explore l'attribut z-index dans CSS, qui est utilisé pour contrôler l'ordre en cascade des éléments de page. Des éléments avec des valeurs plus élevées seront affichés sur des éléments avec des valeurs plus faibles. Ceci est similaire à l'axe des x et à l'axe y sur la page contrôlant respectivement les positions horizontales et verticales des éléments, et z-index contrôle l'ordre d'empilement des éléments sur l'axe z.

Points clés:

L'attribut
• dans z-index contrôle l'ordre d'empilement des éléments de page. Plus la valeur est élevée, plus l'élément est affiché. Il ne fonctionne que sur des éléments dont les valeurs d'attribut sont position, absolute ou relative. fixed
En définissant
• sans attribuer des valeurs aux attributs position: relative, top, right, bottom ou left, vous pouvez contrôler l'ordre d'empilement des éléments sans modifier leur position d'origine sur le page.
L'analyse de la valeur
• z-index est effectuée dans son contexte d'empilement parent, ce qui signifie que même si la valeur z-index de l'élément est élevée, l'élément peut toujours être affiché ailleurs si la valeur z-index de son conteneur parent est faible .
• Pour améliorer l'organisation et la flexibilité, il est recommandé d'utiliser un incrément de 100 pour définir la valeur z-index. Cette approche fournit 99 choix numériques disponibles lors de l'ajout d'une nouvelle couche entre deux couches existantes.

Ordre d'empilement par défaut

Lors de l'écriture de HTML, les éléments arrière du document seront empilés sur les éléments avant par défaut.

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

Dans cet extrait HTML, si tous les éléments sont définis pour se chevaucher, le pied de page sera empilé sur le contenu du corps, qui à son tour sera empilé sur le dessus de l'en-tête.

Les éléments

peuvent être chevauchés en combinant position attributs et top, right, bottom, left,

> Attributs de décalage.

position Si l'attribut absolute de chaque élément est défini sur

, ils se chevaucheront tous. Étant donné que le pied de page apparaît en dernier dans le document, il est empilé en haut des deux premiers éléments par défaut.

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

top Utilisez des propriétés de décalage left et

pour voir plus clairement l'ordre d'empilement des éléments.

Stack Context

position: absolute Bien que les éléments qui se chevauchent puissent être créés à l'aide de , cela ne crée pas le contexte dite Empiler le contexte

.

Le contexte d'empilement peut être créé de la manière suivante:

• L'élément position: absolute a les attributs relative ou z-index, et la valeur auto n'est pas
.
• auto Les éléments Flexbox ont des valeurs z-index qui ne sont pas
.
• L'opacité de l'élément opacity (
) est inférieure à 1.
• L'attribut transform de l'élément none est défini sur une valeur non
.

La façon courante de créer et d'utiliser des contextes d'empilement est le premier, concentrons-nous dessus.

Retournez à l'exemple précédent, nous avons trois éléments se chevauchant, mais pour le moment ils n'ont pas de valeurs z-index.

L'attribut

z-index nous permet de contrôler l'ordre d'empilement.

Si nous définissons le pied de page z-index sur 1, le corps z-index sur 2, et l'en-tête z-index sur 3, l'ordre d'empilement par défaut peut être complètement inversé.

En surface, il semble simple: plus la valeur est élevée, plus la pile des éléments - donc z-index sera toujours au-dessus de z-index: 9999. Malheureusement, la réalité est plus compliquée que cela. z-index: 9

z-index dans le contexte d'empilement

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

Si vous ajoutez une boîte à l'intérieur du récipient

et positionnez-la à l'extérieur du coin inférieur droit, nous verrons qu'il se trouve au-dessus de la boîte verte, sous la boîte rose. site-content

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

En fonction de ce que nous savons de

, nous pourrions penser que pour faire apparaître cette boîte jaune sur la boîte rose, nous devons juste définir une valeur plus élevée pour z-index. z-index

Si nous définissons

sur 4 (ci-dessus z-index), nous ne verrons aucun changement. Les gens essaient généralement de forcer l'empilement avec de très grands nombres (comme 9999), mais cela n'a pas non plus d'effet. Vu dans la base de code, une telle valeur z-index: 3 est une odeur de code, alors essayez de l'éviter si possible. z-index

La raison pour laquelle nous ne pouvons pas obtenir le résultat attendu de la boîte jaune placée au-dessus de la boîte rose est le chemin que

se comporte dans le contexte d'empilement. z-index

pour démontrer cela, regardons un exemple légèrement plus complexe que j'ai emprunté au site Web de MDN.

... (Le code HTML et CSS dans l'exemple MDN est omis ici parce que l'article est trop long, mais la partie clé de l'explication est conservée) ....

Tout cela peut s'expliquer par le fait que toutes les valeurs

sont analysées dans leur contexte d'empilement parent. Étant donné que la valeur du conteneur parent z-index est supérieure à celle du pied de page, tous les éléments de positionnement dans .site-content sont évalués dans ce contexte. z-index .site-content Comprenez l'ordre d'empilement des éléments dans le contexte d'empilement, vous pouvez les comparer aux enfants dans des listes ordonnées imbriquées.

Cela peut être écrit comme suit:

En-tête:

• z-index: 5 Sujet:
• z-index: 4 Encadré 1:
  • z-index: 4.6 Box 2:
  • z-index: 4.1 Box 3:
  • z-index: 4.3
  pied de page:
• z-index: 2
Par conséquent, même si le

de l'en-tête est 5 et que le

de la boîte 1 est 6, son ordre de rendu est de 4.6, ce qui est encore inférieur à 5. Par conséquent, l'encadré 1 est affiché sous l'en-tête. z-index z-index C'était un peu déroutant au début, mais avec la pratique, cela a vraiment commencé à avoir du sens!

L'index z ne convient que pour le positionnement des éléments

Si vous souhaitez contrôler l'ordre d'empilement des éléments, vous pouvez utiliser z-index. Cependant, position ne prendra effet que lorsque la valeur absolute de l'élément est relative, fixed ou z-index.

Mettre des éléments avec précision avec position est idéal pour construire des dispositions complexes ou des modèles d'interface utilisateur intéressants, mais il est souvent souhaitable de contrôler l'ordre d'empilement sans déplacer les éléments dans la position d'origine sur la page.

Si tel est le cas, vous ne pouvez définir que position: relative mais ne fournissez aucune valeur pour top, right, bottom ou left. L'élément restera dans sa position d'origine sur la page, le flux de documents ne sera pas interrompu et la valeur z-index prendra effet.

La valeur d'indice z négative peut être utilisée

Les éléments hydratés sont souvent utilisés pour construire des formes complexes ou des composants d'interface utilisateur. Cela signifie généralement que les éléments sont superposés les uns sur les autres et que la valeur z-index continue d'augmenter. Pour placer un élément sous un autre élément, il a juste besoin d'avoir une valeur z-index inférieure, qui peut être négative. Ceci est utile lors de l'utilisation d'un pseudo-élément et souhaite le positionner derrière son contenu de l'élément parent.

En raison de la façon dont le contexte d'empilement fonctionne, si l'élément

ou

doit être positionné après le contenu texte de son élément parent, une valeur négative :before doit être définie dessus. :after z-index stratégie d'index z

Résumons une stratégie simple que j'ai utilisée lors de l'application de

dans mon projet.

z-index Nous avons utilisé des incréments à un chiffre à un chiffre de la valeur

, mais que se passe-t-il si nous voulons ajouter un nouvel élément entre les deux éléments définis sur

et z-index? Vous devez modifier de nombreuses valeurs - peut-être tout au long de la base de code, ce qui peut causer des problèmes et peut provoquer des pauses CSS dans d'autres parties du site Web. z-index: 3 z-index: 4 Réglez l'index z avec 100 étapes

Lorsque vous traitez avec

, vous voyez souvent du code comme ceci:

z-index

Il a l'air mauvais à mon avis (et ne s'aggrave qu'après avoir attaché

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

). Voir une telle valeur indique généralement que le développeur ne comprend pas le contexte d'empilement et essaie de forcer une couche à être au-dessus de l'autre.

!important Au lieu d'utiliser n'importe quel nombre comme 9999, 53 ou 12, nous pouvons systématiser notre rapport

et apporter plus d'ordre au processus. Ce n'est pas seulement parce que j'ai un trouble obsessionnel-compulsif des développeurs. Sérieusement.

z-index Je n'ai pas utilisé d'incréments à un chiffre de

, mais 100 incréments.

z-index

J'ai fait cela pour garder les choses organisées et j'ai également remarqué de nombreuses couches différentes utilisées dans le projet. Un autre avantage est que si vous avez besoin d'ajouter une nouvelle couche entre deux autres couches, vous pouvez choisir entre 99 valeurs potentielles.

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

Cette approche manuelle est très fiable lors de la construction d'un système, mais lorsqu'elle est utilisée en conjonction avec un préprocesseur comme SASS, il peut être rendu plus flexible.

... (La partie FAQ est omise ici car elle est plus répétitive avec la sortie précédente) ... z-index

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!