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定位问题：伪元素后

回答

相关问题