正文重叠固定，水平导航栏顶部 - CSS/HTML答案

【问题标题】：Body overlaps fixed, horizontal nav bar up top - CSS/HTML正文重叠固定，水平导航栏顶部 - CSS/HTML
【发布时间】：2015-11-07 07:17:22
【问题描述】：

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

http://i.imgur.com/oTkXlWx.png

有人知道怎么做吗？谢谢。

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

基本上，我不希望网页“滚动浏览”导航栏。另外，我的班级还没有学过 javascript，所以如果有一个不使用 javascript 的解决方案，那就太好了。

谢谢各位。

附：这是关于 div 的代码：

<div id="about-text" class="box">
    <h3>About Me</h3> 
    <p>My name is   , I'm 18 years old, and a Computer
    Science student at Swinburne University of Technology, Hawthorn.
    I've always been interested in computers, there is something
    beautiful about technology working to do so many things the human
    brain cannot possibly do.</p>
</div>

和css：

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

}

【问题讨论】：

描述布局的代码在哪里？
@The-Val 我已经更新了问题以包含它，谢谢
#top-nav 的 css ?
哎呀>

标签： html css overlap nav

【解决方案1】：

我相信你只需要给.boxes 足够的margin-top 就可以清除固定的导航栏。

更新：

发现问题的根本原因是使用了页内链接，当点击该链接时，它总是滚动到视口的顶部（在固定导航下）。

最好的解决方案是在每个 div.box 之前添加空的 a 元素以用作链接的目标，并为它们提供足够大的大小以使 .box 能够落入导航栏下方：

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

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

【讨论】：

我已经添加了：.box { margin: 64px auto; }，它允许在进入页面时清除该框的导航栏，但滚动后，它仍然“滚动通过”导航栏，并重叠。跨度>
啊，是的。尝试从#top-bar 中删除opacity 属性并添加z-index: 10。这应该确保内容位于导航栏下方，并且没有任何显示。
这基本上可以工作，导航栏没有“显示”，但是，当我点击“关于我”、“编程”等标题时，仍然很明显上面有数据，框的顶部位于导航栏下方。嗯... :/
哦，终于成功了。您正在使用页内链接，而不是进入新页面。好的，然后将 .box 的上边距改为填充。
确实如此。还有一件事要尝试：删除顶部填充并将：position: relative; 和 top: 64px; 添加到 .box 属性。

【解决方案2】：

您可以使用的一个技巧是将nav 放在header 标记中，并为标题提供背景颜色、白色或您使用的任何颜色。向下滚动将转到导航栏下方，但由于与导航栏重叠的背景颜色，因此不会被看到。

【讨论】：