Question

我的页脚中有一个背景图片，我希望文本位于其顶部。我尝试使用z-index，但它无效。有人可以帮帮我吗？

<footer class="page-footer blue" ng-controller="formCtrl">
    <img style="position:absolute;z-index: 3;height: auto; width: 100%; object-fit: contain;padding: 2%;" class="responsive-img" src="images/WorkWithUs_Desktop_Shapes.png">
    <div class="container">
        <div class="blue white-text">
            <div class="about-blue">         
                <div style="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>
    </div>
</footer>

Answer 1

此处无需使用z-index。只需将position:relative应用于.container课程，然后移除所有z-index值

即可

<footer class="page-footer blue" ng-controller="formCtrl">
  <img style="position:absolute;height: auto; width: 100%; object-fit: contain;" class="responsive-img" src="http://via.placeholder.com/350x150">
  <div class="container" style="position:relative;">
    <div class="blue white-text">
      <div class="about-blue">
        <div 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>

Answer 2

尝试对代码进行这些更改。

<img style="position:absolute;z-index: 0;height: auto; width: 100%; object-fit: contain;padding: 2%;" class="responsive-img" src="images/WorkWithUs_Desktop_Shapes.png">

并且还添加此css规则。

.page-footer .container {
  position: relative;
}

Answer 3

z-index对position:static（默认值）无效。

在你的代码中，我看到你有这条没有位置的行

<div style="z-index: 4" class="row baa">

因此您应该定义 position：relative / absolute; ，以使z-index按预期工作

所以，如果你这样做，一切都会好的

<div style="position:relative; z-index: 4" class="row baa">

z-index对我不起作用

3 个答案: