本文介绍一种基于 flexbox 与绝对定位的 css 解决方案，使图像画廊自然覆盖下方区块，同时在浏览器高度缩小（如移动端或窄高视窗）时自动规避内容重叠，兼顾视觉层次与响应式健壮性。
在现代网页布局中，“画廊叠加于下方内容之上”是一种常见设计需求——既保留上层图文区域的完整性，又通过视觉层叠营造纵深感。但直接使用 position: absolute 容易导致画廊脱离文档流后遮挡下方内容（尤其在视口高度受限时），而单纯依赖 relative 又无法实现真正意义上的“覆盖”。关键在于：控制叠加范围、预留安全间距、并按视口特征智能切换布局模式。
以下是一个经过验证的三段式结构方案：
✅ 核心布局逻辑
- 使用 .container 作为弹性容器（display: flex; flex-direction: column），为内部元素提供上下文定位基准；
- .gallery 设为 position: absolute; bottom: 0，使其锚定在容器底部边缘，而非父容器底部边界——这确保它始终“浮”在文本区末端，而非压住整个 .section-below；
- 为 .section-below 设置 min-height 和足够 padding-top（推荐 ≥ .gallery 的总高度），形成物理缓冲区，从根本上防止视觉重叠；
- 利用 z-index: 1 显式声明图层顺序，避免被其他元素意外覆盖。
? 响应式断点处理（重点！）
当视口高度显著减小（例如手机竖屏或桌面端拖拽窗口变矮），绝对定位可能使画廊侵入下方内容区。此时应主动降级为流式布局：
- 在 @media (max-width: 768px) 中，将 .gallery 的 position 改为 static，取消绝对定位；
- 同时移除半透明背景与内边距，改用 margin-left 配合 flex-direction: row（容器方向切换），让画廊作为行内模块自然排列，彻底规避重叠风险。
? 完整可运行示例
响应式画廊叠加布局 后续内容区域
这里是独立的下方区块，包含表单、列表或其他功能模块。无论浏览器窗口如何缩放，都不会被画廊遮挡。
⚠️ 注意事项与最佳实践
- min-height 是防重叠的基石：.section-below 的 min-height 必须 ≥ .gallery 实际占用高度（含 padding/margin/border），建议通过 DevTools 测量后留出 20–40px 余量；
- 慎用 top: 0 或 left: 0：若画廊需覆盖整个容器，应配合 transform: translateY(-50%) 等微调，避免硬编码偏移值；
- backdrop-filter 提升质感：搭配半透明背景（rgba()）可增强叠加层次感，但需注意 Safari 兼容性（添加 -webkit-backdrop-filter）；
- 测试真实场景：务必在 iOS Safari、Chrome 移动端及桌面端手动拖拽窗口至极限窄高状态验证，避免仅依赖模拟器。
该方案不依赖 JavaScript，纯 CSS 驱动，性能高效且易于维护。通过语义化结构 + 弹性定位 + 智能媒体查询，真正实现了「视觉叠加」与「内容可访问性」的双重保障。
