z-index: -1 的伪元素被背景色隐藏答案

【问题标题】：Pseudo element with z-index: -1 is hidden by background-colorz-index: -1 的伪元素被背景色隐藏
【发布时间】：2019-04-18 10:31:28
【问题描述】：

我有一个 .link 类，它下面有一个 ::after 伪元素（作为悬停时的框阴影）。

.bg {
    background-color: aqua;
    height: 100vh;
}

.link {
    position: relative;
    font-weight: bold;
}

.link::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 1em #888888 inset;
    opacity: 0;
}

.link:hover::after {
    opacity: 1;
}

<div class="bg">
  <p class="link">Link</p>
</div>

但是，当我向包含的 div 元素添加背景颜色时，它会遮盖盒子阴影。我已经尝试添加

position: absolute;
z-index: -2;

到 div，但这会导致 div 的大小调整问题，尽管堆叠是正确的。我想知道是否有首选方法将伪元素放置在 bg 层之上但在原始链接类之后？谢谢！

【问题讨论】：

这里根本不需要 z-index。如果没有应用该属性，它可以正常工作。

标签： html css z-index

【解决方案1】：

将z-index:0（或任何值）添加到背景元素，以创建堆叠内容并避免伪元素移动到后面：

.bg {
    background-color: aqua;
    height: 100vh;
    position:relative;
    z-index:0; /* added */
}

.link {
    position: relative;
    font-weight: bold;
}

.link::after {
    content: '';
    position: absolute;
    z-index: -999; /*you can put any negative value now*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 0 1em #888888 inset;
    opacity: 0;
}

.link:hover::after {
    opacity: 1;
}

<div class="bg">
  <p class="link">Link</p>
</div>

【讨论】：