CSS响应式页面：实现Logo叠加图片及左上角头部布局

实现Logo叠加在背景图并固定在Header左上角 #

用CSS定位就能解决这两个问题，具体步骤如下：

1. 给Header容器设置相对定位 #

先把Header设为相对定位，这样内部的Logo可以以它为基准进行绝对定位：

header {
  position: relative;
  width: 100%;
  /* 若使用背景图作为Header底图，直接在此设置 */
  background-image: url('你的背景图地址');
  background-size: cover;
  background-position: center;
  height: 200px; /* 按需设置Header高度 */
}

2. 给Logo设置绝对定位 #

通过绝对定位把Logo钉在左上角，同时用z-index确保它在背景图上方：

.header-logo {
  position: absolute;
  top: 10px; /* 距离顶部的间距，可自行调整 */
  left: 10px; /* 距离左侧的间距，可自行调整 */
  z-index: 10; /* 数值比背景容器/背景图的z-index高即可 */
  width: 80px; /* 根据你的Logo尺寸设置宽度 */
  height: auto; /* 自动保持宽高比 */
}

对应HTML结构示例 #

<header>
  <img src="你的Logo地址" alt="网站Logo" class="header-logo">
  <!-- Header内的其他内容 -->
</header>

常见问题修正 #

• 若Logo仍被遮挡：如果背景图是单独的<img>标签，给它设置z-index: 1（低于Logo的z-index数值）。
• 若定位偏移：检查Header是否有额外的padding/margin干扰，或者微调top/left的数值。
• 响应式适配：添加媒体查询，在小屏幕上调整Logo大小和位置：

@media (max-width: 768px) {
  .header-logo {
    width: 60px;
    top: 5px;
    left: 5px;
  }
}

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