Question

我创建了一个带有导航栏和部分的小页面。我想设置导航栏position: fixed;，但是如果我这样做，则该部分位于导航栏下方。那就是问题所在。有什么想法可以解决这个问题吗？

*{
    margin: 0px;
    padding: 0px;
    font-family: 'Oswald', sans-serif;
}

body{
    background-color: rgb(29, 29, 29);
    height: 2000px;
}

nav{
    width: 100%;
    background-color: rgb(14, 14, 14);
    overflow: hidden;
    border-bottom: 2px solid black;
    margin-bottom: 5px;
    position: fixed;
    top: 0;
}

.nav-top-ul{
    font-size: 0px;
    width: 930px;
    margin: 0px auto;
}

.nav-top-li{
    display: inline-block;
}

.nav-top-a{
    display: block;
    font-size: 16px;
    padding: 10px 20px;
    color: #C1C1C1;
    transition: all 0.5s;
    text-decoration: none;
}

.nav-top-a:hover{
    color: white;
}

.left{
    float: left;
}

section{
    margin: 0px auto;
    width: 930px;
    background-color: orange;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Seite</title>
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
      
    </head>
    <body>
        <nav>
            <ul class="nav-top-ul">
                <div class="left">
                    <li class="nav-top-li"><a  class="nav-top-a" href="index.php?content=home">NameDerSeite</a></li>
                </div>
            </ul>
        </nav>
        
        <section>
           Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Donec sed odio dui. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </section>
    </body>
</html>

CSS导航栏位置固定部分下

0 个答案: