Fermer

juin 24, 2022

Maîtriser le z-index en CSS –


La z-index est une propriété utilisée pour contrôler l’ordre des calques dans le document. Éléments avec un plus haut z-index valeur apparaissent au-dessus des éléments avec des valeurs inférieures. Tout comme la façon dont les axes x et y sur une page déterminent où un élément est placé horizontalement et verticalement, z-index contrôle la façon dont ils sont empilés les uns sur les autres sur l’axe z.

infographie de l'index z

Empilement par défaut

Lors de l’écriture de notre code HTML, les éléments qui apparaissent plus bas dans le document s’empilent naturellement au-dessus des éléments plus haut.

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

Compte tenu de cet extrait de code HTML, le footer s’empilerait au-dessus de la zone de contenu principale qui s’empilerait au-dessus de la header s’ils étaient tous positionnés pour se chevaucher.

Les éléments peuvent être superposés en utilisant une combinaison de position propriétés et propriétés de décalage top, right, bottom et left.

Si je mets position: absolute sur chacun de ces éléments, ils seront tous disposés les uns sur les autres. La footer vient en dernier dans le document et s’empile donc par défaut au-dessus des deux éléments précédents.

.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;}

Si j’utilise les propriétés de décalage, top et leftnous pouvons voir l’ordre plus clairement.

Contexte d’empilement

Tout en utilisant position: absolute qui crée des éléments qui se chevauchent, nous n’avons pas encore créé ce qu’on appelle un contexte d’empilement.

Un contexte d’empilement est créé de l’une des manières suivantes :

  • un élément avec position absolute ou relative et un z-index valeur qui n’est pas auto
  • un article flexbox avec z-index valeur qui n’est pas auto
  • un élément avec un opacity Moins que 1
  • un élément avec transform réglé sur autre chose que none

La façon de loin la plus courante de créer et d’utiliser un contexte d’empilement est le premier exemple de cette liste, alors concentrons-nous là-dessus pendant une minute.

Pour en revenir à l’exemple précédent, nous avons trois éléments positionnés les uns sur les autres mais actuellement, ils n’ont pas de z-index évaluer.

La z-index propriété nous permet de contrôler l’ordre de l’empilement.

Si je mets z-index: 1 sur le footer, z-index: 2 sur le main et z-index: 3 sur le headerl’ordre de la pile par défaut peut être complètement inversé.

Cela semble assez simple à première vue; plus le z-index plus l’élément s’empile – donc un z-index: 9999 sera toujours au top z-index: 9. Malheureusement, c’est un peu plus complexe que cela.

z-index dans des contextes d’empilement

<header class="site-header blue">header</header>
<main class="site-content green">content
<div class="box yellow"></div>
</main>
<footer class="site-footer pink">footer</footer>

Si j’ajoute une boîte à l’intérieur du site-content conteneur et placez-le juste à l’extérieur du coin inférieur droit, nous pouvons voir qu’il est au-dessus de la boîte verte et en dessous de la boîte rose.

.box {
position: absolute;
bottom: -25px;
right: -25px;
z-index: 4; 
width: 75px;
height: 75px;
border: 1px solid #000;
}
.site-header {top: 0; left: 0; z-index: -1;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px; z-index: 3;}

Sur la base de notre connaissance de z-indexon pourrait penser que pour faire apparaître cette case jaune au-dessus de la case rose, il suffit de définir une valeur plus élevée pour z-index.

Si je mets z-index: 4qui est supérieur à z-index: 3 nous ne voyons aucun changement. Il est courant que les gens essaient de forcer l’empilement en essayant un très grand nombre comme 9999 mais cela n’a aucun effet non plus. Voyant z-index des valeurs comme celle-ci parsemées dans une base de code est un peu un odeur de code alors essayez de l’éviter si vous le pouvez.

La raison pour laquelle nous ne sommes pas en mesure d’obtenir le résultat souhaité de la boîte jaune au-dessus de la boîte rose est due à la façon dont z-index se comporte dans un contexte d’empilement.

Afin de le démontrer, regardons un exemple un peu plus compliqué que j’ai emprunté au Site Web MDN.

<header class="site-header blue">
<h1>Header</h1>
<code>position: relative;<br/>
z-index: 5;</code>
</header>

<main class="site-content pink">
<div class="box1 yellow">
<h1>Content box 1</h1>
<code>position: relative;<br/>
z-index: 6;</code>
</div>

<h1>Main content</h1>
<code>position: absolute;<br/>
z-index: 4;</code>

<div class="box2 yellow">
<h1>Content box 2</h1>
<code>position: relative;<br/>
z-index: 1;</code>
</div>

<div class="box3 yellow">
<h1>Content box 3</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</main>

<footer class="site-footer green">
<h1>Footer</h1>
<code>position: relative;<br/>
z-index: 2;</code>
</footer>
.blue {background: hsla(190,81%,67%,0.8); color: #1c1c1c;}
.purple {background: hsla(261,100%,75%,0.8);}
.green {background: hsla(84,76%,53%,0.8); color: #1c1c1c;}
.yellow {background: hsla(61,59%,66%,0.8); color: #1c1c1c;}
.pink {background: hsla(329,58%,52%,0.8);}

header, footer, main, div {
position: relative;
border: 1px dashed #000;
}
h1 {
font: inherit;
font-weight: bold;
}
.site-header, .site-footer {
padding: 10px;
}
.site-header {
z-index: 5;
top: -30px;
margin-bottom: 210px;
}
.site-footer {
z-index: 2;
}
.site-content {
z-index: 4;
opacity: 1;
position: absolute;
top: 40px;
left: 180px;
width: 330px;
padding: 40px 20px 20px;
}
.box1 {
z-index: 6;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
.box2 {
z-index: 1;
width: 400px;
margin-top: 15px;
padding: 5px 10px;
}
.box3 {
z-index: 3;
position: absolute;
top: 20px;
left: 180px;
width: 150px;
height: 250px;
padding-top: 125px;
text-align: center;
}

Ici nous avons un header, footer et main content conteneur comme avant mais à l’intérieur du site-content nous avons trois boîtes qui ont toutes été positionnées et dotées d’un z-index.

Examinons d’abord les trois principaux conteneurs – le header, footer et main.

La header a un z-index de 5 apparaît donc empilé au-dessus du main content qui a z index: 4. La footer a un z-index de 2 apparaît donc sous le mainavec un plus haut z-index sur 4. Tout va bien jusqu’à présent ? Bien.

Les choses deviennent un peu déroutantes avec les trois boîtes à l’intérieur du main récipient.

La boîte de contenu 1 a un z-index de 6 mais semble être en dessous de la header avec un plus bas z-index de 5.

La boîte de contenu 2 a un z-index de 1 mais apparaît au-dessus du footer qui a un plus haut z-index de 2.

Alors que se passe-t-il?

Tout cela s’explique par le fait que tous z-index les valeurs sont résolues dans leur contexte d’empilement parent. Parce que le conteneur parent .site-content a un plus haut z-index que le footertous les éléments positionnés dans le .site-content sont évalués dans ce contexte.

Une bonne façon de penser à l’ordre d’empilement dans un contexte d’empilement est de le considérer comme un sous-élément dans une liste ordonnée imbriquée.

Cela pourrait s’écrire comme suit :

  • Entête: z-index: 5
  • Principal: z-index: 4
    • Encadré 1 : z-index: 4.6
    • Encadré 2 : z-index: 4.1
    • Encadré 3 : z-index: 4.3
  • Bas de page: z-index: 2

Alors même si, le header est z-index: 5 et content la case 1 est z-index: 6son ordre de rendu est de 4,6, ce qui est toujours inférieur à 5. En tant que tel, content la case 1 apparaît sous le header.

C’est un peu déroutant au début, mais avec la pratique, ça commence à avoir du sens !

z-index ne fonctionne que pour les éléments positionnés

Si vous souhaitez contrôler l’ordre d’empilement des éléments, vous pouvez le faire avec z-index. Mais z-index ne prendra effet que si l’élément a également un position valeur de absolute, relative ou fixed.

Le placement précis des éléments avec la position est idéal pour créer des mises en page complexes ou des modèles d’interface utilisateur intéressants, mais il est courant de vouloir contrôler l’ordre d’empilement sans déplacer l’élément de son emplacement d’origine sur la page.

Si tel est le cas, vous pouvez simplement définir position: relative mais ne fournit aucune valeur pour top, right, bottom ou left. L’élément restera à sa place d’origine sur la page, le flux de documents ne sera pas interrompu et z-index les valeurs prendront effet.

Vous pouvez avoir du négatif z-index

La superposition d’éléments est souvent effectuée pour créer des formes complexes ou des composants d’interface utilisateur. Cela signifie souvent superposer des éléments les uns sur les autres, avec des valeurs toujours croissantes de z-index. Pour placer un élément sur un calque en dessous d’un autre, il suffit qu’il ait une valeur inférieure à z-index mais cette valeur inférieure boîte être négatif.

Un domaine où cela est utile est lors de l’utilisation pseudo-éléments et voulant les positionner derrière le contenu de leur élément parent.

En raison du fonctionnement du contexte d’empilement, une valeur négative de z-index est nécessaire sur n’importe quel :before ou :after éléments s’ils doivent être positionnés derrière le contenu textuel de leur élément parent.

Jetez un œil au Codepen suivant et expérimentez différentes valeurs de z-index.

Voir le stylo GNgvxO par SitePoint (@SitePoint) sur CodePen.

z-index stratégie

Concluons avec une stratégie simple que j’utilise pour postuler z-index tout au long d’un projet.

Auparavant, nous utilisions des incréments à un chiffre pour z-index valeurs mais que se passe-t-il si vous vouliez ajouter un nouvel élément entre deux qui sont définis avec z-index: 3 et z-index: 4? Vous auriez à changer beaucoup de valeurs – peut-être dans toute une base de code qui pourrait devenir problématique et sujette à la rupture CSS sur d’autres parties du site.

Utilisez des étapes de 100 pour le réglage z-index

Lorsqu’il s’agit de z-indexil n’est pas rare de voir un code comme celui-ci :

.modal {
z-index: 99999;
}

Cela me semble juste hacky (et ne fait qu’empirer lorsqu’il est ajouté avec !important). Voir des valeurs comme celle-ci est souvent symptomatique d’un développeur qui ne comprend pas le contexte d’empilement et essaie de forcer une couche à être au-dessus d’une autre.

Au lieu d’utiliser des nombres arbitraires comme 9999 ou 53 ou 12nous pouvons systématiser notre z-index échelle et mettre un peu plus d’ordre dans les débats. Ce n’est pas (seulement) parce que j’ai le développeur OCD. Honnête.

Au lieu d’utiliser des incréments à un chiffre pour mon z-indexj’utilise des incréments de 100.

.layer-one {z-index: 100;}
.layer-two {z-index: 200;}
.layer-three {z-index: 300;}

Je fais cela pour garder les choses organisées, mais aussi pour être conscient des nombreuses couches différentes utilisées tout au long d’un projet. Un autre avantage est que si une nouvelle couche doit être ajoutée entre deux autres, il y a 99 valeurs potentielles à choisir entre les deux.

Lors de la construction d’un z-index système, cette approche manuelle est assez solide mais peut être rendue plus flexible lorsqu’elle est combinée avec les pouvoirs d’un pré-processeur comme Toupet.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link