使用z-index区分同一div内背景色、图标及内容层级

我来帮你调整代码，确保背景色、图标、标题段落按照你要的层级正确显示！先看一下你现有代码的核心问题：z-index 只有在元素设置了非 static 的 position 属性时才会生效，而且绝对定位元素需要有一个定位的父容器作为参考，不然会相对于整个文档定位。

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

<div class="col col-md-4">
  <div class="content bg-secondary" style="position: relative; z-index: 0;">
    <!-- 背景图标容器 -->
    <div class="test" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: flex; justify-content: center; align-items: center;">
      <i class="fa fa-meetup" aria-hidden="true" style="font-size: 175px; opacity: 0.2; color: #fff;"></i>
    </div>
    <!-- 内容容器（标题+段落） -->
    <div class="testt" style="position: relative; z-index: 2; padding: 2rem;">
      <h3>Heading 1</h3>
      <p>content is entered here entered here entered here</p>
    </div>
  </div>
</div>

关键修改点说明： #

• 给.content添加position: relative：让它成为内部绝对定位元素的参考容器，同时它的z-index: 0确保是最底层的背景。
• 重构图标容器：把大图标放在一个占满.content的绝对定位容器里，设置z-index: 1（在背景之上），用opacity降低图标透明度避免遮挡上层内容，还加了flex布局让图标居中显示。
• 给.testt设置position: relative和z-index: 2：让标题和段落容器处于最上层，里面的标题和段落不需要单独设置z-index，会继承容器的层级。
• 移除了重复的小图标：如果不需要两个图标可以直接删掉，保留一个大图标作为背景装饰即可。

这样调整后，层级关系就完全符合你的要求：背景色（z=0）→图标（z=1）→标题段落（z=2），而且元素定位也不会乱跑啦！

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