Question

我有一个绝对位置的主元素，所以我可以创建标头吞咽页面效果。

我的开始屏幕是整页高度的标头广告，当您向下滚动时，主元素会吞下标头。

我的问题是我想把我的导航定位在主要元素中，但当我 position:fixed;top:0px我的section.header无法正常工作

已编辑：我刚添加FIDDLE来解释自己更多

div.container{
    height: 100%;
    position: relative;
    z-index: 1;
}
.flexbox .masthead {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%;
    z-index: -1;
}
.flexbox main[role=main] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    width: 100%;
    z-index: 1;
}

我的HTML代码

<div class="container">
    <header class="masthead">...
    </header>
    <main role="main" id="content">
      <section class="header">...nav...</section>
    </main>
</div>

Answer 1

您所描述的内容听起来像是您希望菜单在向上滚动时与主要元素一起移动，因为您需要使用position：absolute;不是位置：固定;

使用位置：固定;将字面上的菜单固定在窗口的一个位置，它根本不会移动。

我认为这就是你要求的：FIDDLE

我刚从头开始使用CSS。主要内容从底部向上滚动并覆盖“标头”，导航位于主要内容的顶部。

HTML

    <div class="container">
    <header class="masthead">
        <h1>Masthead</h1>
        <p>Scroll Down</p>
    </header>
    <main role="main" id="content">
        <section class="header">
            <ul>
                <li>nav |</li>
                <li>nav |</li>
                <li>nav |</li>
                <li>nav |</li>
                <li>nav |</li>
                <li>nav |</li>
            </ul>
        </section>
         <h1>Title</h1>

        <p>Lorem ispum dolor sit amet consectular adapising elite.</p>
    </main>
</div>

CSS

    html {
    background:#ccc;
    padding:0;
    margin:0;
}
.contatiner {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
.masthead {
    position:fixed;
    z-index:-100;
    top:45%;
    bottom:45%;
    left:40%;
    right:40%
}
#content {
    position:relative;
    width:90%;
    z-index:100;
    margin-top:90%;
    padding:50px 20px 100% 20px;
    left:30px;
    right:30px;
    background:#fff;
}
.header {
    position:absolute;
    top:0;
}
.header ul li {
    display:inline;
}

修复了绝对主元素内的导航

1 个答案: