Question

编辑：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;
    }
}

这会将伪元素放在标题后面，但是窗格会将它留在滑块前面。我已经将滑块放置在相对位置以将其放置在伪元素的前面，但我无法弄清楚我的生活如何调整，因此顶杆始终位于顶部。这里是顶栏的代码：

.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移出<nav>并给它一个高z-index解决了这个问题。另外，严格来说，语义上导航属于{{1}}元素。

Fixed example

CSS定位问题：伪元素之后

1 个答案: