Bootstrap框架下图片无法显示在背景图片上层的问题求解

问题根因 #

• 现有HTML结构中header和section是平级兄弟元素，默认处于正常文档流中，块级元素会从上到下依次排列
• 你给header设置了height: 100vh，也就是占满整个浏览器视口高度，所以section默认会被挤到header的下方，里面的img自然不可能显示在header背景的上层

可行解决方案 #

根据你实际的布局需求，可选以下两种方案：

方案1：调整HTML结构，将图片模块放入header内部 #

如果你需要图片是header区域的内容，直接把section移到header标签里即可：

<header>
  <section>
    <div class="container-fluid h-100">
      <!-- 原有代码的align-item-center是笔误，正确Bootstrap类名是align-items-center -->
      <div class="row align-items-center h-100">
        <div class="col-lg-5 text-center">
          <img src="img.png" width="400" alt="jordan1" >
        </div>
      </div>
    </div> 
  </section>
</header>

如果需要header内部元素垂直居中，给header加position: relative即可

方案2：保持原有结构，用定位让section悬浮在header上层 #

如果你必须保留header和section的平级结构，给section加绝对定位脱离正常文档流即可，修改CSS代码如下：

header {
  height:100vh;
  background: url('backgroundimg.png') no-repeat center center/cover;
  position: relative;
}
section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2; /* 确保层级高于header */
}

如果需要调整图片的垂直位置，直接修改section的top值即可

额外注意事项 #

• 只有设置了非static默认值的position属性的元素，z-index属性才会生效，调整层级前先确认元素定位属性是否符合要求
• 你原有代码里row上的类名align-item-center拼写错误，少了后缀s，会导致垂直居中失效

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