Pourquoi ce pseudo-élément se déplace-t-il au-dessus du parent lors de l'utilisation de la transformation d'échelle?

Question

J'ai une ombre portée dans le coin inférieur gauche d'un div. Je l'ai créé en utilisant un pseudo-élément avant ::. Je veux que la div soit mise à l'échelle quand je la survole, mais quand je le fais, le pseudo-élément se déplace vers le haut de l'ordre de la pile. Pourquoi cela arrive-t-il et comment puis-je empêcher l'élément de se déplacer vers le haut?

.grid-item { 
    width: 200px; 
    height: 200px; 
    margin: 100px auto; 
    background-color: #c2c8e1; 
    border: 1px solid rgba(211, 215, 233, 0.9); 
    position: relative; 
    transition: transform 0.2s ease-in-out; 
} 
.grid-item:before { 
    content: ""; 
    z-index: -1; 
    width: 60%; 
    position: absolute; 
    top: 80%; 
    bottom: 12px; 
    left: 10px; 
    background: #777; 
    box-shadow: 0 15px 10px #777; 
    transform: rotate(-4deg); 
} 
.grid-item:hover { 
    transform: scale(1.03); 
} 

<div class="grid-item"></div> 

Answer 1

Cela ressemble à un petit problème. C'est un enfant de grid-item, si vous appliquez un z-index à grid-item lui-même, vous trouverez que est toujours au-dessus, ce qui est logique, car l'élément de grille a juste une couleur bg et puisqu'il est position: relative, son enfant serait toujours "au top" même s'il a un zindex inférieur.

Vous pouvez utiliser deux éléments pseudo -

.grid-item { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 100px auto; 
 
    position: relative; 
 
} 
 
.grid-item:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #c2c8e1; 
 
    border: 1px solid rgba(211, 215, 233, 0.9); 
 
    transition: transform 0.2s ease-in-out; 
 
    z-index: 99; 
 
} 
 
.grid-item::before { 
 
    content: ""; 
 
    z-index: -2; 
 
    width: 60%; 
 
    position: absolute; 
 
    top: 80%; 
 
    bottom: 12px; 
 
    left: 10px; 
 
    background: #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    transform: rotate(-4deg); 
 
} 
 
.grid-item:hover { 
 
    transform: scale(1.03); 
 
}

<div class="grid-item"></div>