Question

是HTML和CSS的新手，我试图创建一个Sticky Navigation Bar，看起来我没有正确编码。我在下面发布了我的代码，请帮我解决这个问题。感谢。

<!DOCTYPE>
<html>
    <head>
        <title>test</title>
        <style>
            html,
            body {
              margin: 0;
              padding: 0;
            }
            nav{
              min-height: 40px;
              height: 55px;
              background-color: #67518e;
              width: 100%;
            }
            div{
              padding-top: 30px;
              padding-bottom: 30px;
              border-top: 1px solid green;
              border-bottom: 1px solid green;
              background-color: yellow;
              width: 100%;
            }
        </style>
    </head>
    <body>
        <nav>
        </nav>
        <div>
        </div>
    </body>
</html>

Answer 1

您需要使用position: fixed nav左上角的值{。}}。

top:0;
left:0;
position:fixed;

并且您的div需要margin-top等于nav - 身高，否则只会覆盖每个身高;

margin-top:55px;

这是一个小提琴; http://jsfiddle.net/h9u1fe4v/

创建粘性导航栏

1 个答案: