Dans de nombreux cas, un élément doit être positionné pour z-index
fonctionner.
En effet, appliquer position: relative
aux éléments de la question résoudrait probablement le problème (mais il n'y a pas assez de code fourni pour être sûr).
En fait, position: fixed
, position: absolute
et position: sticky
permettra également z-index
, mais ces valeurs changent aussi la mise en page. Avec position: relative
la mise en page n'est pas dérangé.
Essentiellement, tant que l'élément n'est pas position: static
(le paramètre par défaut), il est considéré comme positionné et z-index
fonctionnera.
De nombreuses réponses à "Pourquoi z-index ne fonctionne-t-il pas?" les questions affirment que z-index
seulement fonctionne que sur des éléments positionnés. Depuis CSS3, ce n'est plus vrai.
Les éléments qui sont des éléments flexibles ou éléments de la grille peuvent utiliser z-index
même quand position
est static
.
D'après les spécifications:
4.3. Commande en Z des articles flexibles
Les éléments Flex peignent exactement de la même manière que les blocs en ligne, sauf que l'ordre des documents modifié par ordre est utilisé à la place de l'ordre des documents bruts, et des z-index
valeurs autres que auto
créer un contexte d'empilement même si position
c'est le cas static
.
5.4. Ordre de l'axe Z: la z-index
propriété
L'ordre de peinture des éléments de la grille est exactement le même que celui des blocs en ligne, sauf que l'ordre des documents modifié par ordre est utilisé à la place de l'ordre des documents bruts et des z-index
valeurs autres que celles de auto
créer un contexte d'empilement même si position
c'est le cas
static
.
Voici une démonstration du z-index
travail sur des éléments flex non positionnés: https://jsfiddle.net/m0wddwxs/
Stacking Context
.