position:fixed navbar取另一个div

时间:2018-05-10 10:07:55

标签: html css

<!DOCTYPE HTML>

<html>
    <head>
        <meta charset="utf-8">
        <title>My portfolio</title>
        <style type="text/css">
        * {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    margin-bottom: 20000px;
}



h1 {

}

#headname {
    font-size: 30px;
    font-family: sans-serif;
    padding-left: 20px;
    padding-right: 50px;
    color: #356684; 

}

#calculator {
    text-decoration: none;
    padding-right: 500px;
    font-family:arial;
}

**#navigation {
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #eee;
}**
ul {

}

ul li {
    list-style: none;
    display: inline-block;
    float: left;
    line-height: 60px;

}

ul li a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-family: arial;
    color: #1e1e1e;
    padding: 0 20px;

}

ul li a:hover {
    color: #627f91; 
}

**#bodie {
    margin-top:80px;
}**</style>
    </head>

<body>
<nav id="navigation">
            <ul>
                <li id="headname">My portfolio</li>
                <li><a href="index.php">Home</a></li>
                <li><a href="portfolio.php">Portfolio</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </nav id="navigation">
    <div id="bodie">
        <h1>Welcome to my portfolio</h1>

    </div id="bodie">
    </body>
</html>

我有一个导航栏位置:固定;在我的页面顶部,在导航容器中,ID为#34;导航&#34;。 我在那里有一小段文字,在一个单独的div中,id&#39; d&#34; bodie&#34;,我给出了属性:margin-top:80px;。所以它会显示在导航栏下面。

出于某种原因,导航栏也会获取此属性。我不明白为什么。有人可以向我解释一下吗?

1 个答案:

答案 0 :(得分:0)

您只需要使用固定定位将top: 0;添加到导航中。

此外,您未在结束标记上添加ID,因此</nav id="navigation">应为</nav>。这也适用于div标签。

 * {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    margin-bottom: 20000px;
}



h1 {

}

#headname {
    font-size: 30px;
    font-family: sans-serif;
    padding-left: 20px;
    padding-right: 50px;
    color: #356684; 

}

#calculator {
    text-decoration: none;
    padding-right: 500px;
    font-family:arial;
}

#navigation {
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #eee;
    top: 0;
}

ul {

}

ul li {
    list-style: none;
    display: inline-block;
    float: left;
    line-height: 60px;

}

ul li a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-family: arial;
    color: #1e1e1e;
    padding: 0 20px;

}

ul li a:hover {
    color: #627f91; 
}

#bodie {
    margin-top:80px;
}
<nav id="navigation">
            <ul>
                <li id="headname">My portfolio</li>
                <li><a href="index.php">Home</a></li>
                <li><a href="portfolio.php">Portfolio</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
</nav>

<div id="bodie">
<h1>Welcome to my portfolio</h1>
</div>