Header与图片重叠布局失败，求助可行解决方案

你遇到的问题核心是position: relative不会让元素脱离文档流，所以即使设置了z-index，元素还是会按正常文档流排列，无法产生重叠效果。要实现重叠，需要让其中一个元素脱离文档流，结合position: absolute和z-index来控制层级。

以下是修改后的完整代码：

HTML代码（无需大幅改动） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="home.css">
</head>
<body>
    <div class="header">
        <h1>Pixelcyber</h1>
        <nav>
            <a href="home.html" style="text-decoration:none">Home</a>
            <a href="portfolio.html" style="text-decoration:none">Portfolio</a>
            <a href="projects.html" style="text-decoration:none">Projects</a>
            <a href="contacts.html" style="text-decoration:none">Contacts</a>
        </nav>
    </div>
    <h1>Coder</h1>
    <p>4 years experience</p>
    <div class="wp">
        <img src="luffy.png" alt="luffy">
    </div>
</body>
</html>

CSS代码（关键修改） #

/* 重置默认样式，消除浏览器自带的margin/padding干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
    position: absolute; /* 让header脱离文档流，不再占据原有位置 */
    top: 30px; /* 调整header的垂直位置 */
    left: 30px; /* 调整header的水平位置 */
    z-index: 10; /* 确保header在图片上方，数值越大层级越高 */
    background-color: rgba(255, 255, 255, 0.9); /* 加半透明背景，避免文字被图片遮挡看不清 */
    padding: 15px 25px;
    border-radius: 8px;
}

.wp img {
    width: 100%; /* 让图片铺满容器宽度 */
    display: block; /* 消除图片下方的默认空白 */
    position: relative; /* 给图片设置相对定位，让z-index生效 */
    z-index: 1; /* 图片层级低于header */
}

/* 调整中间文本的位置，避免被header或图片覆盖 */
h1:not(.header h1), p {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: 60px;
    color: #333;
}

关键知识点说明： #

• position: absolute：元素脱离文档流，会相对于最近的非static定位父元素（如果没有则相对于视口）定位，这样就能和其他元素重叠。
• z-index：只有当元素设置了position属性（static除外）时才生效，数值大的元素会覆盖数值小的元素。
• 给header加半透明背景是为了保证文字可读性，你可以根据需求调整颜色和透明度。

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