添加<h1>等标签后导航栏下移且内容不显示的技术求助

问题根源 #

1. 导航栏设置了position: absolute，该属性会让元素脱离正常文档流，不再占据页面物理空间，导致后续的<h1>/<p>元素从页面顶部开始渲染，被导航栏完全覆盖，所以看不到内容。
2. 浏览器默认给<body>和<h1>设置了margin值（比如Chrome中<body>默认margin为8px，<h1>默认margin-top为0.67em），这些默认样式会触发margin折叠，使页面整体向下偏移，看起来像是导航栏被推了下去。

可行解决方案 #

方案1：固定导航栏在顶部（推荐） #

如果希望导航栏始终固定在页面顶部，将position: absolute替换为position: fixed，同时给<body>添加顶部内边距，避免内容被导航栏遮挡：

#nav {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  background-color: #2c64b4;
  width: 100%;
  margin: 0;
}

body {
  margin: 0;
  padding-top: 40px; /* 与导航栏高度一致，留出内容空间 */
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
#nav ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
#nav ul li a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  color: #fff;
  text-align: center;
}

方案2：让导航栏留在正常文档流 #

如果不需要导航栏固定，直接移除position: absolute和left: 0，同时清除默认的页面边距：

#nav {
  height: 40px;
  background-color: #2c64b4;
  width: 100%;
  margin: 0;
}

body {
  margin: 0;
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
#nav ul li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
#nav ul li a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  color: #fff;
  text-align: center;
}

额外建议：重置默认样式 #

为了避免浏览器默认样式引发的各类布局问题，建议在CSS开头添加全局重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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