如何制作固定顶部且占满宽度的导航菜单？解决顶部空白问题

页面顶部空白示意图

你遇到的核心问题是固定定位（position:fixed）元素脱离文档流后，默认浏览器样式和布局重置不到位，以下是几个直接可行的解决方案：

方案一：完善全局样式重置 + 固定定位导航栏设置 #

先彻底清除所有元素的默认边距和内边距，同时给固定定位的header配置正确属性：

/* 全局样式重置，覆盖所有元素默认的margin和padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 让padding和border不占用额外宽度，避免横向滚动条 */
}

/* 固定定位导航栏设置 */
header {
  position: fixed;
  top: 0; /* 紧贴页面顶部 */
  left: 0; /* 紧贴页面左侧 */
  width: 100%; /* 占满整个页面宽度 */
  background-color: #ffffff; /* 设置背景色，防止下方内容透过导航栏显示 */
  z-index: 999; /* 确保导航栏在最上层，不被其他内容遮挡 */
}

方案二：单独处理body默认边距 #

若全局重置未生效，可单独清除body的默认边距：

body {
  margin: 0;
}

导航栏的固定定位属性保持top:0; left:0; width:100%即可。

额外注意事项 #

使用position:fixed后，导航栏会脱离文档流，下方内容会被导航栏遮挡，需给body或第一个内容容器添加padding-top，值等于导航栏的高度。例如导航栏高度为60px：

body {
  padding-top: 60px;
}

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