C’est une règle en CSS que beaucoup de designers connaissent, mais la première fois qu’on s’y frotte on se sent très con: on ne peut pas appliquer z-index à un élément dont le parent possède déjà un “stacking context”.

Ce n’est pas un bug, c’est comme ça que c’est supposé fonctionner.

Qu’est-ce qu’un “stacking context” ?

On appelle “stacking context” l’état d’un élément que le navigateur garde en mémoire pour effectuer le rendu de cet élément dans la page. Le “stacking context” dit si l’élément doit être devant ou derrière chaque autre élément se superposant à l’écran avec lui.

Chaque fois que vous utilisez une propriété comme z-index, opacity ou transform sur un élément dans un fichier CSS, le navigateur recalcule le “stacking context” pour savoir si il met maintenant cet élément devant ou derrière les autres à la même position que lui.

Et du coup, j’ai pas compris le début, c’est quoi déjà le problème ?

Si vous faites un truc qui change le “stacking context” d’un élément, vous ne pouvez appliquer z-index sur aucun de ses enfants.

Ainsi si vous avez un HTML comme ça:

<p class="parent">
    <span class="child">Truc</span>
</p>

Et que vous faites ça dans votre CSS:

.parent {
    z-index: 1;
    opacity: 0.5;
    transform: rotate(5deg);
}
 
.child {
    z-index: -1;
}

La dernière règle n’aura aucun effet.

Donc si vous vous acharnez sur F5 parce qu’un z-index semble ne pas marcher quelque part, vous savez maintenant qu’il faut juste remonter la chaîne de tous les parents de cet élément pour voir si vous avez pas à un moment changé le “stacking context” de l’un d’entre eux.