如何让logo显示在拆分背景的左上角且不会出现在背景下方？

HTML代码调整 #

你需要先把logo元素补全到容器最顶部，完整结构参考如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>LoLstudy</title> 
    <link rel="stylesheet" href="fstyle.css" /> 
</head> 
<body> 
    <div class="container">
        <!-- 新增logo结构，放到所有背景元素之前 -->
        <div class="logo">
            <img src="替换为你的logo资源路径" alt="站点logo">
        </div>
        <div class="left"></div>
        <!-- 如果有右侧背景块补在这里即可 -->
        <div class="right"></div>
    </div>
</body>
</html>

CSS代码调整 #

核心用定位+层级控制保证logo在最上层，修改后代码如下：

* { 
    margin: 0; 
    padding: 0; 
    font-family: 'Montserrat', sans-serif; 
    box-sizing: border-box;
}

/* 拆分背景容器基础配置 */
.container {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
}

/* 左右拆分背景示例样式，可根据你的需求替换 */
.left {
    width: 50%;
    background: #1a1a1a;
}
.right {
    width: 50%;
    background: #ffffff;
}

.wrapper { 
    width: 1170px; 
    margin: auto; 
}

.logo {
    position: absolute;
    top: 2%;
    left: 5%;
    z-index: 999;
}

.logo img { 
    width: 84px;
}

实现逻辑说明 #

• 给父容器.container设置position: relative，作为logo绝对定位的位置参照，避免logo以整个浏览器窗口为基准偏移
• z-index: 999控制元素堆叠层级，数值远高于默认层级的背景元素，保证logo不会被背景盖住
• 绝对定位让logo脱离普通文档流，不受背景元素的布局影响，固定在左上角位置

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