如何让导航栏在 CSS 中保持在顶部

Question

我需要一些关于如何让我的导航栏在 CSS 中保持在顶部的帮助。从技术上讲，我使用的是 Sass，但是 CSS 与 Sass 兼容，所以一切都很好（只要它有效！）。

我知道这个问题已经被问过好几次了，但通常是 JavaScript 或者没有回答问题。我已经尝试使用 position:sticky，但也许我把它放在了错误的标签中。

这里是 html 代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../../static/css/styles.css">
        <title>Home</title>
    </head>
    <body>
        <div class="navbar">
            <h1>SomeCompany</h1>

            <ul>
                <li><a href="localhost:8000">Home</a></li>
                <li><a href="localhost:8000">About</a></li>
                <li><a href="localhost:8000">Products</a></li>
                <li><a href="localhost:8000">Testimonials</a></li>
                <li><a href="localhost:8000">Contact Us</a></li>
            </ul>
        </div>
    </body>
</html>

现在，这是 CSS 代码（我在 .navbar 中使用 position:sticky）：

body {
margin: 0; }

.navbar {
    position: sticky;
    padding: 1em 2em;
    background-color: antiquewhite;

    h1 {
        margin: 0; }

    ul {
        position: relative;
        bottom: 1em;
        float: right;

        li {
            display: inline;
            margin-right: 2em; }
    }
}

提前致谢

Answer 1

我相信这里描述了您要尝试做的事情：https://www.w3schools.com/howto/howto_css_fixed_menu.asp

Answer 2

您需要在导航栏中定义 top: 0px;（或您想要的任何值）然后它应该可以工作。

Answer 3

你可以尝试加入css position:absolute；和 top:0；到导航栏 class.

如何让导航栏在 CSS 中保持在顶部

How to make the navbar stay at the top in CSS

html

css

navbar