Warum bewegt sich dieses Pseudoelement bei Verwendung der Skalierungstransformation über das übergeordnete Element hinaus?

Question

Ich habe einen Schlagschatten in der unteren linken Ecke eines Div. Ich habe es mit einem :: before-Pseudo-Element erstellt. Ich möchte, dass das div skaliert wird, wenn ich darüber schwebe, aber wenn ich dies tue, bewegt sich das Pseudo-Element an die Spitze der Stapelreihenfolge. Warum passiert das und wie kann ich verhindern, dass sich das Element nach oben bewegt?

.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

Scheint wie ein bisschen ein Glitch. Es ist ein Kind von Grid-Item, wenn Sie einen Z-Index auf Grid-Item selbst anwenden, werden Sie feststellen, dass es immer oben ist, was sinnvoll ist, da Grid-Item nur eine BG-Farbe hat und da ist Position: Relativ, sein Kind wäre immer "oben", auch wenn es einen kleineren Index hat.

Sie könnten zwei Pseudo-Elemente verwenden -

.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>