CSS定位問題：僞元素後

編輯：位於註釋中的Tinkerbin示例。CSS定位問題：僞元素後

我遇到的問題是固定的頂部條在滑塊後面（現在只有一個滑塊在測試中）。這是發生由於光的綠色背景用於勾勒出標頭是使用創建的：對。第-頭類僞元素之後，像這樣（使用SASS）：

.page-header { 
    position: relative; 
    z-index: 0; 
    padding: 35px 0; 
    &:after { 
     position: absolute; 
     width: 100%; 
     top: 0; 
     left: 0; 
     right: 0; 
     height: 400px; 
     border-bottom: 5px solid $white; 
     z-index: -1; 
    } 
}

這會將僞元素在標題後面，但是窗臺將它放在滑塊前面。我已經將滑塊定位在僞元素的前面，但我無法弄清楚我的生活如何調整，因此頂部欄總是處於頂部。這裏的頂杆代碼：

.nav-cont { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    padding: 0; 
    height: 40px; 
    z-index: 9999; 
}

隨意看看演示網站，讓我知道你是否有任何想法。我一直在通過Chris Coyier's引用以及其他一些參考，並且似乎無法形成一個解決方案。

預先感謝任何人可能會看看這個！

來源

2011-12-11 thatsamore

爲了幫助我們來幫助你，你可以提供，你觀察這個問題最簡單可行的情況下，與[的jsfiddle]演示（http://www.jsfiddle.net）？ – bookcasey

沒問題，[你去這裏]（http://tinkerbin.com/va5liu44）。 – thatsamore

我想通了。

.nav-cont是header的小孩，由於背景的奇怪的z-index必需品，它在幻燈片放映下被拉下來。 z-index是相對的，因此在高z-index下，導航只能是header中最高的東西，全部都在幻燈片下。

將.nav-cont搬出header並給它一個高z指數可以解決這個問題。此外，嚴格來說，語義上導航屬於<nav>元素。

Fixed example

來源

2011-12-11 05:38:02 bookcasey

謝謝，書架！我會看看重新洗牌的一切。我實際上只是看看TechCrunch的網站，看看他們是如何處理這個問題的，他們也在做同樣的事情。噢，我已經在'

CSS定位問題：僞元素後

回答

相關問題