html -::在具有负 z-index 的伪元素之前不显示在父元素后面

Question

我发誓我已经这样做了一百次了，但是对于我来说，我无法弄清楚为什么我的 :before 伪元素的背景显示在文本后面而不是后面主播的背景。想法？

.button {
    background: tomato;
    padding: 10px 30px;
    margin: 20px 0;
    display: inline-block;
}

.button:hover {
    margin: 18px 0 22px 2px;
    position: relative;
    z-index: 2;
}

.button:hover:after {
    position: absolute;
    background: red;
    top:-2px;
    left: -2px;
    content: "";
    z-index: -10;
    width: 100%;
    height: 100%;
}

<a class="button" href="#">Meow</a>

此处示例:http://jsfiddle.net/cfree/hnKLr/

Answer 1

当您向元素添加 z-index 值时，您会创建一个新的堆叠上下文。该元素的每个子元素都将堆叠在它上面。

因此，当您想将一个元素放在其父元素后面时，只需不要在父元素上创建堆叠上下文即可。不过，您仍然需要使用负 z-index，因为父级的默认堆栈级别将为 0(在元素所在的任何上下文中)