Problème de z-index et priorité d'affichage

Je rencontre souvent des personnes se plaignant de problèmes de z-index et qui les évitent ou se contente de dire que les z-index ça pose problème. Bien souvent le problème vient du fait que le développeur ne s'attend pas à ce que la priorité d'affichage des z-index fonctionnent en cascade dans le DOM. Voyez plutôt l'exemple suivant :

Un exemple d'utilisation du z-index problématique

Nous observons que la zone avec un z-index de 7777 passe en dessous de la zone avec un z-index de 2. Comment cela est-il possible ? « J'ai des problèmes de z-index ! ».

Regardons de plus près le code :

HTML

<div id="content">
    Coucou je suis le contenu principale !<br />
    z-index: 1;
    <div id="test">
        Coucou je suis un problème !<br />
        z-index: 7777;
    </div>
</div>
<div id="footer">
    <div>
        Coucou je suis le pied de page !<br />
        z-index: 2;
    </div>
</div>

CSS

#content {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1; /* Le contenu doit s'afficher en arrière plan. */
}
#footer  {
    padding-top: 100px;
    margin: 0 auto;
    width: 50%;
}
#footer > div {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2; /* Le contenu s'affiche au-dessus de `#content`. */
}
#test {
    position: absolute;
    width: 80%;
    height: 200px;
    z-index: 7777; /* Le contenu ne s'affiche pas au-dessus de `#footer` comme attendu... */
    left: 10%;
}

z-index et priorité d'affichage en cascade dans le DOM

Tous les éléments dont nous allons parler sont des éléments en position: relative, position: absolute, position: fixed ou position: sticky.

Priorité aux éléments frères bas

On part des éléments les plus hauts dans le DOM et de même niveau (frères). C'est l'élément situé en dessous d'un autre dans le code source qui s'affiche par dessus l'autre.

Changer les priorités

Pour modifier ce comportement on applique un z-index plus grand aux éléments plus haut pour les forcer à passer par dessus.

Priorité aux éléments parents

Quoi qu'il arrive, et peut importe le z-index utilisé, un élément fils d'un élément avec un z-index plus faible qu'un de ses frères ne passera jamais au-dessus de ce frère. Il faut se faire une raison...

Mon conseil

Le mieux est de ne pas mélanger l'affichage relatif / absolue / fixe / sticky d'éléments fils venant de différent pères eux-mêmes relatifs.