Div被Header遮挡问题求助：通用CSS及视差滚动布局实现

嘿，我来帮你搞定这个布局问题！听起来你正在为网站搭建一套可复用的通用CSS，想实现带视差滚动的横幅，同时搭配Header和带联系信息的Footer，但遇到了一个头疼的问题——内容Div和Header都挤在页面顶部，没法让内容乖乖待在Header下面，对吧？

这问题大多是定位方式冲突或者文档流处理不当导致的，我给你一套分步解决方案，既能解决重叠问题，又能让布局通用可复用：

首先确保你的页面结构是层级分明的，这样后续CSS才好控制：

<!-- 顶部Header -->
<header class="site-header">
  <div class="header-inner">
    <!-- 这里放Logo、导航菜单等 -->
  </div>
</header>

<!-- 视差横幅区块 -->
<section class="parallax-banner" style="background-image: url('你的背景图路径');">
  <div class="banner-content">
    <h1>你的横幅标题</h1>
    <p>横幅副标题描述</p>
  </div>
</section>

<!-- 页面主要内容区 -->
<main class="site-content">
  <div class="content-inner">
    <!-- 页面具体内容 -->
  </div>
</main>

<!-- 底部Footer -->
<footer class="site-footer">
  <div class="footer-inner">
    <!-- 联系信息：电话、邮箱、地址等 -->
  </div>
</footer>

最常见的原因是Header用了**固定定位（fixed）**导致脱离文档流，下面的内容自然会顶上去。这时候我们只需要给后续的区块加上等于Header高度的上内边距，把内容往下推：

/* 全局重置，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Header样式 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px; /* 按你的实际Header高度调整 */
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 100; /* 确保Header在所有内容之上 */
}

/* 视差横幅：加上等于Header高度的内边距，避开Header */
.parallax-banner {
  padding-top: 70px; /* 必须和Header的height值一致 */
  min-height: 500px; /* 横幅最小高度，可按需调整 */
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* 横幅内容居中样式 */
.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
  z-index: 2;
}

/* 可选：给横幅加半透明遮罩，提升文字可读性 */
.parallax-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}

如果你的Header是静态/相对定位，那重叠大概率是因为视差容器用了position: absolute，这时候只需要把视差容器的定位改成relative，让它留在文档流里，自然就会跟着Header往下排：

.site-header {
  position: relative;
  height: 70px;
  background: #ffffff;
}

.parallax-banner {
  position: relative; /* 去掉absolute，改用relative */
  min-height: 500px;
  /* 其他视差样式不变 */
}

为了让这套布局能复用在多数页面，我们可以把视差样式抽成通用类，同时做移动端适配：

/* 通用视差区块类，任何需要视差效果的区块都能加这个类 */
.parallax-section {
  position: relative;
  min-height: 400px;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 移动端适配：fixed视差在部分手机上会失效，换成scroll */
@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll;
  }
}

/* 通用内容容器，让页面内容不会太宽 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

如果想让Footer始终固定在页面底部，不管内容多少，可以用Flex布局实现：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1; /* 让内容区占满剩余空间，Footer自动被推到底部 */
  padding: 2rem 0;
}

.site-footer {
  background: #333333;
  color: #ffffff;
  padding: 2rem 0;
  text-align: center;
}

• 检查是否有其他CSS规则覆盖了你的布局样式，比如全局的position或者margin设置
• 如果Header高度是动态的（比如响应式变化），可以用JavaScript监听窗口变化，动态调整内容的上内边距，不过一般固定高度配合媒体查询就能满足需求

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