Question

我在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>

Answer 1

似乎有点小故障。它是网格项的孩子，如果你将z-index应用于网格项本身，你会发现始终位于顶部，这是有道理的，因为网格 - item只有一个bg颜色，因为它是position：relative，它的孩子总是＆＃34;在顶部＆＃34;即使它的zindex较小也是如此。

您可以使用两个伪元素 -

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: