Can an：在使用背景圖像重疊下一個元素之後？

我有一個圖像，我想添加爲：在元素後導航欄。重點是：之後將覆蓋下一部分的頂部（這是設計的一部分）。Can an：在使用背景圖像重疊下一個元素之後？

The：after設置爲位置：絕對頂部：100％，似乎在下一個元素下消失，z-index沒有幫助。當頂部設置爲小於100％時，可以看到nav上方的：after元素。

的標記：

<nav>Contents</nav> 
<div>Contents</div>

的CSS：

nav { 
    width: 100%; 
    position: relative; 
} 

nav:after { 
    content: ''; 
    width: 100%; 
    height: 66px; 
    background-image: url('image.png'); 
    background-repeat: repeat-x; 
    position: absolute; 
    left: 0; 
    top: 100%; 
} 

No CSS for div yet...

提前感謝！

來源

2015-04-29 dshamis317

我懷疑你需要的是對內容的div中的z-index'設定爲比僞元素的下** **，但請注意，內容DIV除靜態位置外，其他位置都必須設置位置......相對位置通常就足夠了。 –

它會覆蓋。你有溢出：隱藏在導航和導航的父母？ – Stickers

你的代碼看起來應該像現在這樣工作：https://jsfiddle.net/8w7kz5Lc/如果你可以提供一個JS小提琴它不工作，我可以嘗試修復它。 –

您只需要將Content div上的z索引設置爲小於僞元素的z索引，但請注意Content div必須在靜態以外的任何其他位置設置... position：relative is通常足夠。

或者，只需將僞元素的z-index設置爲高於div（可能默認爲1）。

nav { 
 
    width: 100%; 
 
    position: relative; 
 
    height: 50px; 
 
    background: lightgreen; 
 
} 
 
nav:after { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 66px; 
 
    background: rgba(0, 0, 255, 0.5); 
 
    background-repeat: repeat-x; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    z-index: 2; 
 
} 
 
div { 
 
    height: 260px; 
 
    position: relative; 
 
    background: rgba(255, 0, 0, 0.5); 
 
}

<nav>Nav</nav> 
 
<div>Contents</div>

來源

2015-04-29 15:58:42

Can an：在使用背景圖像重疊下一個元素之後？

回答

相關問題