使用position: fixed固定导航栏时出现空白且内容下移怎么解决？

• 固定定位脱离文档流：position: fixed属性会让元素脱离正常文档流，不再占用原布局中的空间，父容器计算高度时不会纳入该元素的尺寸，导致后续同级元素默认从页面顶部开始排版，容易被固定导航栏遮挡。
• 盒模型计算溢出：你给导航栏设置了width: 100%+上下左右15px的padding，默认content-box盒模型下，元素总宽度为「100%视口宽度+左右30px padding」，超出视口宽度触发溢出，进而出现布局错位、空白区域、下方元素被挤压的问题。
• 全局默认边距未清除：浏览器默认给body设置了8px的外边距，也会导致固定定位的导航栏和页面边缘出现间隙，间接影响布局。

1. 先全局统一盒模型、清除默认边距，在CSS最顶部添加如下代码：

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

该设置会让所有元素的padding、border都纳入宽度计算范围，不会出现设置width后被padding撑宽的问题，同时清除了浏览器默认的边距干扰。

2. 优化导航栏的固定定位样式，将width: 100%替换为左右定位，进一步避免宽度溢出问题：

nav {
  padding: 15px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0; /* 实现全屏宽度，比width:100%兼容性和稳定性更好 */
}

3. 给导航栏下方的内容预留导航高度，避免内容被导航栏遮挡：
   测量你导航栏的实际总高度（包含上下padding），给父容器.hero-section或者直接给同级的.intro-container添加上内边距，示例：

.hero-section {
  padding-top: 60px; /* 此处数值替换为你导航栏的实际高度即可 */
  /* 原有其他属性保持不变 */
}

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