::負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指數僞元素之前不顯示在父母后面

回答

相關問題