z-index et contexte d'empilement
La propriété CSS z-index, à laquelle on associe un nombre, est une propriété pratique: elle permet de définir des ordres d'empilements de blocs HTML.
Cependant, elle n'est pas si aisée à comprendre. Je l'ai compris longtemps assez naïvement, faussement du coup, et je pense ne pas être le seul.
Récemment, je me suis attelé à résoudre proprement un problème graphique: une ombre (ou lueur) autour de blocs accolés mais de taille différentes, épousant la forme des blocs dans leur ensemble, sans chevauchement.
Et j'ai pas mal cherché, expérimenté, sans solution, jusqu'à ce que je tombe sur cet article génial: https://developer.mo...prendre_z-index
Et là, j'ai trouvé solution à mon problème - et compris beaucoup de choses qui m'avaient échappé concernant la propriété z-index.
Au fond, j'ai peut-être été trompé par une vérité, disons plutôt: une semi-vérité: "la valeur par défaut du z-index est égale à 0".
C'est vrai, mais à une nuance près, une nuance capitale: définir un z-index, même nul, déclare un contexte d'empilement. Ne pas le définir ne déclare aucun contexte d'empilement. Et dans certains cas, cela change tout.
Le positionnement, et l'absence de positionnement, influent également, plus qu'on ne croit, sur la façon dont les blocs interagissent, y compris ceux qui n'ont pas de z-index.
Le contexte d'empilement: voilà ce que ma naïve vision de départ ne prenait pas en compte, par simple ignorance de la propriété z-index avec assez de précision.
Et le contexte d'empilement, c'est ce que je vous conseille vivement d'aller découvrir, car cela explique beaucoup d'échecs, et ouvre autant de perspectives voire plus.
Vous avez retenu ? Contexte d'empilement.
Source: le bien plus complet et formidable article: https://developer.mo...prendre_z-index
[...]