z-index不生效求助：如何让页脚文字置于背景图片上方

嘿，我来帮你搞定这个问题！你遇到的z-index不生效的核心原因是：z-index属性只对设置了非static定位（比如relative、absolute、fixed）的元素起作用。你现在的文字容器虽然加了z-index，但它的position是默认的static，所以浏览器根本不会理会这个z-index值。

下面是具体的修复步骤和修改后的代码：

关键修复点 #

• 给页脚容器（.page-footer）添加position: relative：这样内部的绝对定位图片会相对于页脚定位，同时也能让文字容器的z-index生效。
• 给文字所在的.row.baa容器添加position: relative：配合z-index，让它能覆盖在图片上方。
• 移除页脚内.blue.white-text的背景色（如果不需要的话）：否则这个带背景色的div会盖住背景图片。

修改后的完整代码 #

<footer class="page-footer blue" ng-controller="formCtrl" style="position: relative;">
  <img style="position:absolute; z-index: 3; height: auto; width: 100%; object-fit: contain; padding: 2%; top: 0; left: 0;" class="responsive-img" src="images/WorkWithUs_Desktop_Shapes.png">
  <div class="container">
    <!-- 移除了这里的blue背景类，避免盖住图片 -->
    <div class="white-text">
      <div class="about-blue">
        <div style="position: relative; z-index: 4" class="row baa">
          <div class="form-header mikado">WANT TO WORK WITH US?</div><br>
          <div class="row">
            <div class="col s12 l5 xl5">
              <p style="font-size: 1.1em;">We're always looking to expand our team, with teachers and learners alike.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

额外说明 #

• 我给图片加了top: 0; left: 0，确保它从页脚的左上角开始定位，铺满整个页脚。
• 如果你的.page-footer原本有内边距，可能需要调整图片的padding或者页脚的内边距，避免内容被遮挡。
• 要是你还需要.blue背景色，可以把它移到页脚容器上，同时调整图片的透明度（比如opacity: 0.5），这样背景色和图片能叠加显示。

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