CSS定位问题：伪元素之后

Question

编辑：位于 cmets 中的 Tinkerbin 示例。

我遇到的问题是固定顶栏位于滑块后面（现在只有一张幻灯片用于测试）。发生这种情况是因为用于勾勒标题的浅绿色背景是使用 .page-header 类上的 :after 伪元素创建的，就像这样（使用 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;
    }
}

这将伪元素放在标题后面，但 sill 将它留在滑块前面。我已经将滑块相对放置在伪元素的前面，但我一生都无法弄清楚如何调整，所以顶栏总是在顶部。这里是顶栏的代码：

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

请随时查看演示站点，如果您有任何想法，请告诉我。我和其他一些人一起浏览了Chris Coyier's 参考资料，但似乎无法找到解决方案。

提前感谢任何可能对此进行研究的人！

Answer 1

我想通了。

.nav-cont 是header 的子代，由于背景奇怪的 z-index 要求，它被拉到幻灯片下方。 z-index是相对的，所以z-index高的导航只能是header中最高的东西，都在幻灯片下面。

将.nav-cont 移出header 并为其设置高z-index 可解决此问题。另外，严格来说，导航在语义上属于 <nav> 元素。

Fixed example