如何实现图片画廊向下层section叠加且浏览器高度缩小时不重叠内容？

核心思路 #

用相对定位+负外边距实现画廊与下层section的叠加效果，同时给下层section设置对应值的内边距，预留画廊占用空间避免内容重叠。配合媒体查询在不同屏幕尺寸下调整参数，保证响应式适配。

具体实现步骤 #

1. 梳理DOM结构

确保层级清晰，示例结构如下：

<div class="upper-area">
  <div class="blog">
    <!-- 文本内容 -->
  </div>
  <div class="block">
    <!-- 小型图片画廊 -->
  </div>
</div>
<div class="gallery">
  <!-- 需要叠加的图片画廊内容 -->
</div>
<section class="lower-section">
  <!-- 下层section内容 -->
</section>

2. 基础样式设置

/* 上层区域保持正常文档流，确保画廊位置跟随上层底部 */
.upper-area {
  width: 100%;
  padding: 40px 0; /* 按需调整 */
}

/* 核心：画廊相对定位+负外边距实现叠加 */
.gallery {
  position: relative;
  margin-top: -80px; /* 负边距值 = 想要叠加到下层的高度 */
  z-index: 10; /* 确保画廊在下层section之上 */
  width: 90%;
  margin-left: auto;
  margin-right: auto; /* 可选：居中画廊匹配设计 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; /* 按需设置图片布局 */
}

/* 下层section设置内边距，预留画廊空间避免内容重叠 */
.lower-section {
  padding-top: 120px; /* 内边距值 = 画廊总高度 - 负边距值 */
  position: relative;
  z-index: 1;
  background: #fff; /* 按需设置 */
}

3. 响应式适配（媒体查询）

根据屏幕尺寸调整画廊布局、负边距和下层内边距，适配不同场景：

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr; /* 移动端改为单列布局 */
    margin-top: -60px; /* 调整叠加高度 */
  }
  .lower-section {
    padding-top: 240px; /* 对应画廊高度变化调整内边距 */
  }
}

@media (max-width: 480px) {
  .gallery {
    margin-top: -40px;
  }
  .lower-section {
    padding-top: 220px;
  }
}

4. 动态高度适配方案（可选）

如果画廊高度动态变化（如图片数量不固定），用JS计算并调整内边距：

function adjustGallerySpacing() {
  const gallery = document.querySelector('.gallery');
  const lowerSection = document.querySelector('.lower-section');
  if (!gallery || !lowerSection) return;

  const overlapHeight = 80; // 自定义叠加高度
  const requiredPadding = gallery.offsetHeight - overlapHeight;
  lowerSection.style.paddingTop = `${requiredPadding}px`;
}

// 页面加载和窗口 resize 时触发
window.addEventListener('load', adjustGallerySpacing);
window.addEventListener('resize', adjustGallerySpacing);

关键注意事项 #

• 确保.gallery的z-index大于.lower-section，保证视觉层级正确。
• 负边距数值不要超过上层区域底部空余高度，避免覆盖上层.block或.blog内容。
• 媒体查询参数需根据实际设计和画廊高度调整，多测试不同屏幕尺寸的显示效果。

内容的提问来源于stack exchange，提问作者Bora Bey Sarikaya