本文讲解如何通过 CSS 定位（position: absolute）让页眉（header）自然覆盖在背景图片上方，解决因文档流导致的层叠失效问题，并提供可直接运行的代码示例与关键注意事项。

本文讲解如何通过 css 定位（`position: absolute`）让页眉（header）自然覆盖在背景图片上方，解决因文档流导致的层叠失效问题，并提供可直接运行的代码示例与关键注意事项。

在网页布局中，“页眉覆盖图片”是一种常见视觉设计需求（如英雄区 Banner：标题+导航栏悬浮于大图之上）。但初学者常误以为仅靠 z-index 或 position: relative 就能实现，却忽略了定位上下文（containing block） 和文档流脱离这两个核心前提。

默认情况下，

和

均为普通块级元素，按文档流自上而下排列，彼此无重叠可能。要实现层叠，必须让其中一个元素脱离文档流，并赋予其明确的定位坐标。

✅ 正确做法是：

• 将图片容器（.wp）设为相对定位（position: relative），作为绝对定位元素的参考父容器；
• 将页眉（.header）设为绝对定位（position: absolute），并指定 top: 0; left: 0;，使其锚定在图片容器左上角；
• 同时确保 .header 的 z-index 高于图片内容（默认即可，因绝对定位元素天然层叠于静态元素之上）。

以下是完整、可直接运行的修复方案：

.header