Css 固定导航内绝对主元素

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

“我的开始”屏幕是具有整页高度的报头，当您向下滚动时，主元素会吞下报头

我的问题是，我想将导航定位到主元素中，但当我

位置：固定；顶部：0px

my section.header它不工作

编辑：我只是添加了一个例子来进一步解释我自己

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>

...
…导航。。。

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

使用位置：固定；将菜单固定在窗口的一个位置，它将不会移动

我想这就是你想要的：

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

HTML

---

请告诉我，你说的“不工作”是什么意思？我必须说你的代码比我的小得多。首先谢谢你。其次，我需要导航粘贴在顶部的滚动条上。我加了一把小提琴来演示我的问题。我不知道你们所说的顶部的滚动条是什么意思。。。你的意思是：是的，完全正确。但是1）我需要主元素内的导航2）当用户向下滚动时，必须“保持在顶部”，以便您希望导航栏上升到页面顶部，然后停留在那里？

    <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>

    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;
}