为什么在使用缩放变换时这个伪元素会移动到父元素之上？ [复制]

【问题标题】：Why does this pseudo-element move above parent when using scale transform? [duplicate]为什么在使用缩放变换时这个伪元素会移动到父元素之上？ [复制]
【发布时间】：2018-03-15 07:32:11
【问题描述】：

我在 div 的左下角有一个投影。我使用 ::before 伪元素创建了它。当我将鼠标悬停在它上面时，我希望 div 可以缩放，但是当我这样做时，伪元素会移动到堆栈顺序的顶部。为什么会发生这种情况，如何阻止元素移动到顶部？

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

【问题讨论】：

标签： html css css-transforms pseudo-element

【解决方案1】：

似乎有点小问题。它是 grid-item 的子项，如果您将 z-index 应用于 grid-item 本身，您会发现它 is 总是在顶部，这是有道理的，因为 grid-item 只有一个 bg color 并且因为它是 position: relative，所以即使它的 zindex 较小，它的孩子也总是在它的“顶部”。

你可以使用两个伪元素 -

.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);
}

&lt;div class="grid-item"&gt;&lt;/div&gt;

【讨论】：