::负Z指数伪元素之前不显示在父母后面

我发誓我已经做了这一百次，但对于我的生活，我不明白为什么我的:before伪元素的背景是在文字后面显示，但不在主播背景的后面。思考？::负Z指数伪元素之前不显示在父母后面

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

来源

2013-11-09 cfree

当您z-index值添加到一个元素，创建一个新的堆叠内容。该元素的每个孩子都会堆叠在上面。

所以，当你想放置一个元素在它的父类后面时，不要在父类上创建一个堆栈上下文。尽管如此，你仍然需要使用一个负z-index，因为父级的默认堆栈级别为0（无论元素在哪个上下文中）

来源

2013-11-09 23:22:00

这在Chrome的新版本中变得更加清晰，其中:: before和:: after是它们所连接的元素内的节点。 – cfree

的::before和::after伪元素的命名有点令人混淆 - 它们的行为，如果他们匹配的元素的子元素，而不是它的兄弟姐妹。

在这种特殊情况下，这似乎是一个box-shadow是最合适的：

.button:hover { 
    box-shadow: -2px -2px 0 red; 
}

Is this the effect you were looking for?

来源

2013-11-09 22:45:58 rninty

@minty不是，我想要''before'背景图像，元素 – cfree

“他们表现得好像他们是孩子一样”。那是因为他们是孩子。 – mystrdat

::负Z指数伪元素之前不显示在父母后面

回答

相关问题