个人中心
gpt4 book ai didi

html - 创建粘性导航栏

转载 作者：太空宇宙 更新时间：2023-11-03 23:23:53 26 4
gpt4 key购买 nike

作为 HTML 和 CSS 的新手，我试图创建一个粘性导航栏，但似乎我没有正确编码。我已经在下面发布了我的代码，请帮我解决这个问题。谢谢。

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

最佳答案

你需要在你的 nav 上使用 position: fixed 和 top 和 left 值..

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

和你的 div 需要有 margin-top 等于 nav-height，否则它只会叠加在一起；

margin-top:55px;

这是一个 fiddle ； http://jsfiddle.net/h9u1fe4v/

关于html - 创建粘性导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27780114/

26 4 0
文章推荐： javascript - 如何使这个 CSS 联系表单与 javascript 一起工作？
文章推荐： node.js - grpc 客户端断开连接时我可以收到通知吗？
文章推荐： c - 在 C 中设计一个简单的 GUI 框架
文章推荐： javascript - 如何获取索引不等于2的ul中的li，我知道如何获取索引gt或lt 2