主体重叠固定，水平导航栏向上-CSS/HTML

我必须为一项作业建立一个网站，我有点麻烦。我在顶部创建了导航栏，它位于固定位置。然而，当我滚动时，一切都会通过它显示出来。我想要的，基本上是网页从导航栏下开始，所以它在顶部，当我点击“关于我”时，它在导航栏下没有标题，就像在第二张图片中一样

有人知道怎么做吗？谢谢

#top-bar
    {   
        border-top:#fff dashed 1px;
        width:100%;
        height:32px;
        background:black;
        opacity:0.8;
        text-align:center;
        position:fixed;
        top:0;
        padding-bottom:12px;

    }

#top-nav li
{
    display: inline-block;
    line-height: 49px;
    padding: 0px 14px;


}

#top-nav li a
{
    display:block;
    color: #ddd;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

#top-nav li:hover, #top-nav li:hover a
{
    background-color:#333;
    color:#fff;
}

以及html：

    <nav id="top-bar">
        <ul id="top-nav">
            <li>
                <a href="#about-text">About Me</a>
            </li>

            <li>
                <a href="#programming-text">Programming</a>
            </li>

            <li>
                <a href="#home-text">Hometown</a>
            </li>

            <li>
                <a href="#swinburne-text">Swinburne</a>
            </li>

            <li>
                <a href="#achievement-text">Acheivements</a>
            </li>
        </ul>
    </nav>

---

我相信你只需要给

.box

足够的

边距顶部

，它就可以清除固定导航条

更新：

发现问题的根本原因是使用了页内链接，单击时这些链接总是向右滚动到视口顶部（固定导航下）

最好的解决方案是在每个

div.box

之前添加空

a

元素作为链接的目标，并为这些元素提供足够大的尺寸，使

div.box

位于导航栏下方：

<a href="#about-text" class="button"></a>
<div class="box"> ... </div>

.button {
    display: block;
    padding: 25px;
}

... 
.按钮{
显示：块；
填充：25px；
}

您可以使用的一个技巧是将

nav

放在

标题

标记内，并为标题提供背景色，白色或您使用的任何颜色。向下滚动将进入导航栏下方，但由于背景颜色重叠，因此无法看到。

描述布局的代码在哪里？@Val我更新了问题，将其包括在内，感谢css为

#top nav

？Oops>我添加了：

.box{margin:64px auto；}

，这允许在进入页面时清除导航栏中的框，但在滚动之后，它仍然“滚动”导航栏，并重叠。啊，是的。尝试从

#顶栏

中删除

opacity

属性，然后添加

z-index:10

。这应该确保内容放在导航栏下，并且没有显示任何内容。这基本上是可行的，没有任何内容“显示”导航栏，但是，很明显上面有数据，因为当我点击标题“关于我”、“编程”等时，框的顶部在导航栏下。嗯…：/哦，终于点击了。您使用的是页面链接，而不是新页面。好的，那么将

.box

上的上边距改为填充。确实如此。还有一件事要尝试：删除顶部填充并添加：

position:relative和
顶部：64px
到
.box
属性。
#about-text, #programming-text, #home-text, #achievement-text
{

    border-style : solid;
    border-width:0.2em;
    opacity:0.5;
    width : 70%;    
    transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;

}

<a href="#about-text" class="button"></a>
<div class="box"> ... </div>

.button {
    display: block;
    padding: 25px;
}