标头/导航问题

Question

所以我有一个问题，我不确定从哪里开始修复它。

我

有一个标题，在这个标题中我有我的导航标签/css。这是一个固定的标题，因此当我向下滚动页面时，文本会位于其下方。我遇到了一个问题，每当我尝试将文本放在页面上（标题下方）时，我发现我必须将文本向下移动约 100px 才能显示在页面上。

所以我的问题是如何设置标题，以便没有文本可以放在它后面，除非/直到我向下滚动页面？

提前感谢大家的帮助！

<div class="pageheader-cont">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My page</a></li>
<li><a href="#">Contributors</a></li>
<li><a href="#">Info</a></li>
<ul id="drop-nav">
<li class="mess"><a href="#">Sign out</a>
<ul>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li class="mess"><a href="#">Write us!</a></li>
</ul>
</nav>
</div>
</div>

好的，这里有一些代码。看起来有点乱，但那是因为我试图注销并写信给我们！具有不同的设置，但现在主页信息已取代。不知道如何正确解决此问题。

由于上面的标签，这是我无法执行 and

标签的代码。

<p class="itembelowheader"><a href="#">Items Page</a></p>
<p class="itembelowheader"><a href="#">Item one </a></p>
<p class="itembelowheader"><a href="#">Item two</a></p>

Answer 1

我建议将以下内容添加到标题下方项目的 css 中

#itembelowheader {
margin-top: 100px; // or whatever you header height is.
}

或者，将

标题保持正常状态，只有在开始滚动后才能将其从正常放置例程中删除。

Answer 2

试试这个解决方案

.HTML

<div id="header">
THIS IS NAVIGATOR
</div>
<div id="content">
TEXTS GOES HERE
</div>

.CSS

#header {
height:50px;
width:100%;
background-color: darkblue;
top: 0;
position: fixed;
color: white;
}
#content {
height: 1000px;
margin-top: 65px;
color: black;    

}

小提琴 http://jsfiddle.net/y3aucbhv/