html - 修复定位菜单栏覆盖与其链接的元素

Question

我正在开发一个静态单页网站，该网站顶部有一个固定位置的菜单栏。当我点击菜单栏上的链接时，它会转到链接的元素并覆盖它。

这是我的 html 和 css 的片段: Here is the fiddle fo shizzle my nizzles

nav {
    text-align:center;
    display:inline-block;
    width:70%;
    position:fixed;
       ...
}

如何使其像普通菜单栏一样工作并且不覆盖链接的元素？

Answer 1

您需要在固定 div 之后的元素上添加 padding-top 将其向下推。

JSFIddle Demo

顺便说一句，ID 和类不能以数字开头...因此

HTML(部分)

<div id="menu">
    <nav>
        <p id="menus">
        <a class="menusor" href="#1">1</a>
        |
        <a class="menusor" href="#2">2</a>
        </p>
    </nav>
</div>
<div id="one"> etc...

CSS(部分)

nav {
    text-align:center;
    display:inline-block;
    background-color:#351b0e;
    width:70%;
    font-size:1.2em;
    padding-left:15%;
    padding-right:15%;
    position:fixed;
    top:0%;
    z-index:9999;
    margin-bottom:25%;
}

#one {
    padding-top:70px; (or some other value)
}