CSS问题：顶部导航栏（Topbar）无法随页面滚动定位

嘿，我来帮你搞定这个导航栏的问题！你遇到的顶部空白和定位失效的情况，主要是两个原因：浏览器默认的页面边距，还有fixed定位下原来的margin负值没起作用反而添乱。

先给你拆解一下问题：

• 当你把元素设为position:fixed后，它会脱离正常的文档流，不再受父元素或者其他文档流元素的边距影响，你原来写的margin-left: -10px和margin-top: -10px其实已经没用了。
• 大部分浏览器会给html或body默认加上8px左右的margin，这就是你看到顶部空白的元凶。

下面是修改后的完整解决方案：

/* 先重置页面默认的边距和内边距，干掉浏览器的默认样式 */
html, body {
  margin: 0;
  padding: 0;
}

.topBar{
  position: fixed; /* 开启固定定位，让导航栏随滚动固定 */
  top: 0; /* 让导航栏紧贴视口顶部，彻底消除顶部空白 */
  left: 0; /* 紧贴视口左侧，保证宽度铺满 */
  width: 100%; /* 让导航栏宽度铺满整个视口 */
  height: 50px;
  overflow: hidden;
  list-style-type: none;
  z-index: 999; /* 加上这个，确保导航栏不会被页面其他元素盖住 */
  /* 这里可以加你的导航栏背景色，比如 background: #2c3e50; */
}

/* 重要！如果页面内容被固定的导航栏挡住了，给body加个顶部内边距，数值和导航栏高度一致 */
body {
  padding-top: 50px;
}

给你解释下关键改动：

1. 重置html和body的默认边距，直接把浏览器自带的空白干掉。
2. 用top:0和left:0代替原来的负值margin，让fixed定位的导航栏精准贴在视口的左上角。
3. z-index:999是保险项，避免页面其他层级高的元素覆盖导航栏。
4. 最后给body加padding-top，是因为fixed定位的元素不会占文档流的位置，页面内容会跑到导航栏下面，加个内边距就能让内容显示在导航栏下方。

你可以把这段代码替换掉原来的CSS，应该就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者DavidAnastasov