CSS固定顶部导航被页面元素覆盖的解决方法咨询

这是个很常见的CSS堆叠层级问题，其实只需要调整元素的堆叠顺序就能轻松搞定。

当你给导航设置position: fixed后，它确实会脱离正常文档流，但如果没有显式指定z-index，浏览器会根据默认的堆叠上下文规则来决定元素层级，这就导致后续的标题、段落等元素可能覆盖在导航上方。

具体解决方案： #

给你的.topnav添加z-index属性，设置一个足够大的数值（比如999，只要比页面中其他元素的z-index高就可以）：

.topnav {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999; /* 新增这行，让导航置于所有元素上方 */
}

额外小提示： #

因为导航固定在顶部，页面的主体内容会从浏览器顶部开始渲染，导致顶部的内容会被导航遮挡。你可以给页面的body或者第一个内容容器添加顶部外边距，数值匹配导航的高度，比如假设导航高度是50px：

body {
  margin-top: 50px; /* 让内容从导航下方开始显示 */
}

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