如何在不移动其他元素时将缩写名称和图片置于页眉背景上方？

我需要将图片、文本与页眉背景放置在指定位置，但移动其中一个元素时，另一个会向下偏移。这些元素未归为同一类，附上我的CSS与HTML代码：

原CSS代码 #

.Header {
    z-index: index 1;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    position: fixed;
    padding: 30px;
    height:2px;
    box-sizing:border-box;
    background-color:blue;
}

#logo image {
    width: 600;
    z-index: index -1;
    position:absolute;
    float:left;
}

#AbbreviateName {
    z-index: index 1;
    font-size: 40px;
    float:left;
    position:absolute;
    opacity:1;
    color:rgb(255,255,255);
}

原HTML代码 #

<body>
    <img src="./assets/images/itachisignature.png" id="logo" alt="Itachi Eyes"/>
    <h1 class = "Header"></h1>
    <h1 id="AbbreviateName"><strong>A.L.C </strong></h1>        
</body>

我已尝试调整z-index（包括-1、0、1）、padding、margin，以及position: fixed/absolute，但问题仍未解决。

问题根源分析 #

1. z-index语法错误：原代码中z-index: index 1;是错误写法，正确格式为z-index: 数值;，不需要额外添加index关键字。
2. 选择器无效：#logo image无法选中目标img元素，直接使用#logo即可。
3. 属性冗余冲突：绝对定位元素脱离文档流，float属性对其完全无效，同时使用会导致布局逻辑混乱。
4. Header高度设置不合理：.Header设置height:2px却添加了padding:30px，结合box-sizing:border-box会导致容器实际可视高度被压缩，布局塌陷。
5. 定位容器缺失：所有绝对定位元素默认相对于body定位，没有统一的父容器约束，导致元素位置易偏移。

修复后的代码 #

CSS代码 #

.Header {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px; /* 设置合理的页眉高度 */
    padding: 0 30px; /* 调整内边距，避免高度被压缩 */
    box-sizing: border-box;
    background-color: blue;
}

#logo {
    width: 600px; /* 添加单位px，确保尺寸生效 */
    z-index: 0;
    position: absolute;
    top: 10px; /* 用top/left精准控制位置 */
    left: 30px;
}

#AbbreviateName {
    z-index: 2;
    font-size: 40px;
    position: absolute;
    top: 10px;
    left: 650px; /* 避开logo位置，可根据需求调整 */
    margin: 0; /* 清除h1标签默认margin，避免意外偏移 */
    color: rgb(255,255,255);
}

HTML代码 #

<body>
    <div class="Header">
        <img src="./assets/images/itachisignature.png" id="logo" alt="Itachi Eyes"/>
        <h1 id="AbbreviateName"><strong>A.L.C </strong></h1>        
    </div>
</body>

修复要点说明 #

• 将图片与文本放入Header容器内，让它们相对于固定定位的Header进行定位，避免位置混乱。
• 修正z-index语法，移除无效的index关键字，通过数值明确层级关系。
• 移除冗余的float属性，使用top/left精准控制元素位置。
• 给Header设置合理高度，调整内边距避免布局塌陷。
• 清除h1标签的默认margin，消除默认样式带来的偏移问题。

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