Table des matières
Liens rapides
Points clés à retenir
- CSS z-index détermine l’ordre d’empilement des éléments sur une page Web, les nombres plus élevés apparaissant devant.
- z-index fonctionne avec des éléments non statiques et nécessite l’utilisation d’une propriété de position (par exemple, fixe, absolue) pour fonctionner.
- Des exemples pratiques d’utilisation de z-index incluent des menus de navigation, des en-têtes collants, des accordéons et des fenêtres contextuelles interactives pour une meilleure présentation visuelle.
Si vous avez déjà eu du mal à créer un menu déroulant ou un en-tête collant qui reste devant les autres contenus, vous devrez maîtriser la propriété CSS z-index. Cet outil simple mais puissant détermine l’ordre d’empilement des éléments, influençant la hiérarchie visuelle de votre page Web.
Plongez dans les bases et le fonctionnement de la propriété z-index et explorez les façons dont vous pouvez l’inclure pratiquement dans votre prochain projet Web.
Qu’est-ce que le z-index CSS ?
La propriété CSS z-index spécifie l’ordre d’empilement des éléments qui se chevauchent sur une page Web. Vous pouvez l’utiliser pour déterminer quels éléments apparaissent devant ou derrière les autres.
Imaginez une pile de papiers colorés qui représentent différents éléments d’une page Web. En attribuant un numéro, vous pouvez influencer la position de chaque papier dans la pile. Lorsque vous utilisez z-index, un nombre inférieur signifie que l’élément apparaît derrière les autres, tandis qu’un nombre plus élevé signifie qu’il est devant.
Le terme z-index vient de l’axe z, représentant la troisième dimension dans un système de coordonnées cartésiennes 3D. L’axe Z indique la profondeur de l’objet ou à quelle distance il se trouve en arrière ou en avant dans votre champ de vision.
Comment fonctionne la propriété CSS z-index
La propriété z-index a une syntaxe simple. Voici quelques exemples:
z-index: auto;
z-index: 10;
z-index: -2;
La valeur par défaut est auto qui, dans la plupart des cas, est identique à une valeur de 0. Notez que vous pouvez utiliser des nombres négatifs qui se comportent de la même manière que des nombres positifs : les valeurs inférieures apparaissent derrière les valeurs supérieures dans l’ordre d’empilement.
Vous devrez apprendre comment fonctionne la propriété CSS position pour utiliser la propriété z-index. Avant d’appliquer z-index à un élément, vous devez définir sa propriété position. Z-index fonctionne avec n’importe quel élément non statique, que ces valeurs communes de la propriété position établissent toutes :
- fixé
- absolu
- relatif
- collant
Vous trouverez ci-dessous un exemple simple de z-index en action utilisant l’une des propriétés de position CSS.
.red-box, .blue-box, .green-box {
width: 200px;
height: 200px;
position: fixed;
}.red-box {
background-color: red;
top: 50px;
left: 50px;
z-index: 3;
}
.blue-box {
background-color: blue;
top: 80px;
left: 80px;
z-index: 2;
}
.green-box {
background-color: green;
top: 110px;
left: 110px;
z-index: 1;
}
Dans cet exemple, chaque case colorée a une position fixe, définie par haut et gauche. La propriété z-index contrôle l’ordre d’empilement des cases, les valeurs plus élevées plaçant ces éléments au premier plan.
En expérimentant différentes propriétés et valeurs de position, vous pouvez explorer les différentes manières d’utiliser z-index dans vos projets.
Exemples pratiques utilisant z-index
Voici quelques exemples de composants Web utilisant les propriétés z-index avec lesquels vous pouvez vous entraîner.
- Menus de navigation : si vous souhaitez créer un menu déroulant en utilisant HTML et CSS, vous pouvez utiliser z-index pour contrôler l’ordre d’empilement du menu dans une barre de navigation. Assurez-vous que la liste déroulante apparaît au-dessus des autres éléments de la page lorsqu’elle est active.
- En-têtes collants : lors de la création d’un en-tête collant avec CSS, vous pouvez utiliser z-index pour qu’il reste fixe en haut de la page Web lorsque les utilisateurs font défiler. Il fournit une séparation claire entre l’en-tête et le reste de la page.
- Accordéons : en utilisant HTML et CSS pour créer un accordéon, vous aurez besoin de z-index pour contrôler l’ordre d’empilement des panneaux. Assurez-vous que le panneau accordéon actif apparaît au-dessus des autres, créant ainsi un affichage visuellement clair et organisé.
- Pop-ups interactifs : créez des superpositions interactives ou des pop-ups à l’aide de z-index. Ceci est particulièrement utile pour afficher des informations ou des options supplémentaires sans quitter le contenu principal.
Ces exemples pratiques montrent la polyvalence de la propriété z-index pour améliorer la présentation visuelle et l’expérience utilisateur sur une page Web.