如何用原生HTML/CSS实现HTML元素堆叠 图片为背景上层放其他元素

问题根源 #

你现在的堆叠效果出不来，本质是两个很常见的前端层叠误区：

• 你把要当背景的图片当成普通内容块插在文档流里，它会自然占住一整行的垂直空间，把后面的h3内容挤到自己的下方，视觉上就是文本落到了图片下面
• 你给h3写的z-index: 2完全不起作用：z-index属性只对设置了非static定位（也就是position不是默认的static值）的元素生效，h3默认就是static定位，写了层叠值也白搭

具体修改步骤 #

1. 给背景图单独加专属样式类，让它完全脱离正常文档流，放到所有内容的最底层
2. 把背景图从文档流的内容区间挪到所有页面元素的最开头，不要夹在导航和正文中间占排版位置
3. 移除之前写在h3上无效的z-index代码，避免无意义的层叠设置

修改后的CSS代码 #

/* 全局背景层样式，新增 */
.bg-wallpaper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* 原有导航样式保留即可 */
.navBar {
  display: flex;
  position: sticky;
  top: 0;
  padding: 20px;
  border: 2px solid gainsboro;
  width: 100%;
  justify-content: center;
  background-color: gainsboro;
  z-index: 2;
}

#Title {
  color: black;
  font-family: monospace;
}

.navBar:hover {
  border: 2px solid black;
}

注：之前写在h3规则里的z-index: 2因为没有搭配position属性，完全不生效，可以直接删掉。因为背景层已经设置了负的z-index，所有正常文档流里的内容会自动叠在它上面，不需要额外给每个元素写层叠值。

修改后的HTML代码 #

<!-- 背景图放在所有内容最前面，加专属类 -->
<img class="bg-wallpaper" src="...">

<!-- 原有正常页面内容按顺序排列即可 -->
<div class="navBar" onclick="toHomePage()">
  <div>
    <h1 id="Title">A Random Website</h1>
  </div>
</div>
<h3>Blablabla</h3>
<br>
<h3>01234567890</h3>

常见踩坑提醒 #

• 如果担心页面滚动时背景位置错位，优先用position: fixed做背景层，比absolute更适配长页面的全局背景需求
• 给背景图加object-fit: cover，避免图片因为宽高100%被拉伸变形
• 不需要给body设置透明背景，避免出现层叠透出的问题，保留默认的白色背景做兜底即可

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