css 导航栏组件与页面内容重叠

ioekq8ef 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(170)

我有一个NavBar组件是固定位置的，因此将其从正常的页面流中删除。问题是，我的网页内容是坐在导航栏下或右下，我想添加一些保证金之间的导航和网页内容。将正文margin-top设置为与导航栏相同的大小，除了给予导航栏的高度外，没有任何作用。知道我忽略了什么吗？我在页面顶部有一个div，它被导航栏重叠，因此导航栏的顶部有额外的边距空间。
Gallery.css:

.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border: 1px solid black;
    margin-top: 55px;
}

Navbar.css:

.nav {
    background-color: white;
    color: black;
    font-size: 25px;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    padding-bottom: 5px;
    position: fixed;
    width: 100%;
    height: 55px;
    border-bottom: 1px solid gainsboro;
}

css

来源：https://stackoverflow.com/questions/76317615/navbar-component-overlapping-page-content

2条答案

按热度按时间

sh7euo9m1#

您需要将页面内容 Package 在应用所需样式（如边距）的容器中。例如：

.content {
  margin-top: 55px;
}

<div class="content">
  ....
</div>

容器元素必须在导航条之后，这样边距才能按预期工作。

赞(0）回复(0）举报 2023-05-30

km0tfn4u2#

是的，position:fixed将元素从页面流中取出。因此，它所占用的空间可供下一个元素占用。有几个解决方案可以抵消这一点。

**解决方案1：**您可以为<body>标签指定一个padding-top，该padding-top等于导航栏的高度。因为你的导航栏是position:fixed，所以它会粘在顶部，但其他所有东西都会向下移动。或者你也可以把padding-top给任何包含你所有部分的父节点，在下面的例子中的<main>标签上。
**解决方案2：**您可以给予第一个部分（导航条后面的部分）一个margin-top，等于导航条的高度。这将从顶部向下推动此部分，为导航栏腾出空间。在下面的示例中，第一个<section>或<main>元素。
**解决方案3：**我个人建议使用position:sticky，而不是position:fixed。Sticky将做几乎相同的事情，但它不会完全在页面流之外。它仍然会占用它所需要的空间，同时在你向下滚动时被粘在页面的顶部。

在积极的一面 *，你不需要担心自己腾出空间。如果您决定稍后更改导航栏的大小，这将很有帮助。
在消极的一面 *，你需要小心它的父母。只包含导航栏的最上面的容器需要是position:sticky。
例如 *

<body>
    <header>
        <nav>
        </nav>
    </header>
    <main>
        <section>
        </section>
        <section>
        </section>
    </main>
</body>

在这种情况下，<nav>元素不能有position:sticky。由于只有导航条的最上面的父元素是<header>元素，因此即使您将所有其他样式应用于<nav>元素，它也需要是position:sticky。
如果您不确定position:sticky，可以阅读from MDN

赞(0）回复(0）举报 2023-05-30

我来回答

css 导航栏组件与页面内容重叠

2条答案

相关问题

热门标签

最新问答