设置header为fixed定位时顶部2张图片的figcaption被遮挡问题求助

嘿，这个问题我太熟了！当你把.main-header设置为position: fixed时，它会完全脱离正常的文档流——简单说就是它“飘”在页面最上层，下面的内容根本不会意识到它的存在，自然就会往上顶，刚好把顶部图片的figcaption给挡住。

给你几个靠谱的解决方案，按需选就行：

方案1：给body添加顶部内边距（最常用） #

先确认你的header CSS补全了fixed定位的关键属性（看你给的代码好像没写完，应该要加这些）：

.main-header {
  background-color: #3cb371;
  width: 100%;
  position: fixed; /* 核心属性，让它固定在顶部 */
  top: 0;
  left: 0;
  height: 80px; /* 假设你的header高度是80px，根据实际情况改 */
}

然后给body加一个等于header高度的padding-top，手动给header腾出位置：

body {
  font-family: sans-serif;
  padding-top: 80px; /* 数值和header的height保持一致 */
}

方案2：给顶部图片容器加外边距 #

如果不想修改body的样式，也可以直接给顶部的图片容器（比如包含那两张图的父元素）加margin-top，数值同样等于header的高度：

.image-container {
  margin-top: 80px;
}

方案3：适配动态高度的header（响应式场景） #

如果你的header高度会随屏幕尺寸变化（比如移动端缩小高度），可以用CSS变量或者JavaScript动态计算：

用CSS变量的写法 #

:root {
  --header-height: 80px; /* 基础高度 */
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px; /* 移动端调整高度 */
  }
}

.main-header {
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

body {
  padding-top: var(--header-height);
}

用JavaScript动态计算（更灵活） #

如果header高度是完全动态的（比如内容撑开高度），可以用JS实时获取高度并设置padding：

// 获取header元素
const header = document.querySelector('.main-header');
// 初始化设置padding
document.body.style.paddingTop = `${header.offsetHeight}px`;

// 窗口大小变化时重新计算
window.addEventListener('resize', () => {
  document.body.style.paddingTop = `${header.offsetHeight}px`;
});

原理其实很简单：fixed定位的元素不占据文档流空间，我们通过添加内边距/外边距，给它“预留”出对应的空间，这样下面的内容就不会被它盖住啦。

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