Html “固定”；粘的；屏幕顶部的导航栏

因此，我一直在尝试创建一个导航栏，使用HTML和CSS将“粘贴”到页面顶部，即使用户向下滚动。 使用

position:sticky

标记执行此操作。问题是，我无法修复页面顶部的div

这就是我的CSS：

.bar {
  position:sticky;
  top:0;
  color: white;
  background-color: black
}

p {
  display: inline;
}

。。。和我的HTML代码：

<nav class="bar">
  <p>Home</p>
  <p>Info</p>
  <p>Contact Us</p>
</nav>

家

信息

联系我们

sticky

property有效。问题是，

条

在页面顶部不是“固定”的。我知道。不是最好的解释词。 我只希望它在那里，没有任何利润。试图减少身体的填充物/边距，但不起作用。我能做什么

---

另一个问题：

top:0真正做什么？
position:sticky
property没有它就不能工作，我想知道为什么。
在开始向下滚动之前，sticky positioning将被视为相对定位。因此，如果粘滞元素的父元素有一些边距/填充，它将影响该元素

您可能希望尝试固定定位，以便图元始终固定在顶部，没有任何边距

当然，fixed element消除了元素应该位于的位置的间隙，因此您的内容可能会重叠，并且需要添加另一个与您的fixed element具有相同高度的元素来修复重叠的内容

例如，见下文


.bar{
位置：固定；
排名：0；
颜色：白色；
背景色：黑色；
宽度：100%；
左：0；
}
p{
显示：内联；
}

家

信息

联系我们

要解决导航栏上的边距问题，最好在CSS代码的顶部添加一个重置，以覆盖浏览器默认值。在这里，我将所有元素的边距和填充设置为0。因为它位于顶部，所以它后面的任何样式都将覆盖重置，您可以根据自己的心意进行定制

“顶部”属性对于“粘贴位置”起作用是必需的，因为浏览器需要确定图元的最终位置。左、右和底部属性也将完成此任务


*{
边际：0px；
填充：0px；
}
.酒吧{
职位：-网络工具包粘性；
位置：粘性；
排名：0；
颜色：白色；
背景颜色：黑色
}
p{
显示：内联；
}
demoFiller先生{
背景颜色：珊瑚；
}

家

信息

联系我们

0
1

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,

0

一,

二,

三,

四,

五,

六,

七,

八,

九,


分享您的完整代码一些相关问题（如果没有重复）：//@Temaniaf如果我的
标签由导航栏（如上所述）和一些
元素组成，以使页面可滚动。这就是全部。我不认为我需要提及我的全部代码。是的，你必须提及。如果您不告诉我们，我们无法知道您的代码包含什么，并且您的问题与您的整个代码密切相关。如果我们无法根据您的代码重现您的问题，没有人可以帮助您以下是您共享的代码：没有问题，因此我们需要更多详细信息和代码