::之前的伪元素,负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(在任何上下文中元素都是)