z-index not working as expected for me

Question

I have a background image in my footer and I want the text to be on top of it. I tried using z-index but it is not working. Can somebody help me?

<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

No need to use z-index here. Just apply position:relative to the .container class and remove all z-index values

 <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

Try making these changes to your code.

<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">

and also, add this css rule.

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

Answer 3

z-index has no effect for position:static (the default).

and in your code here i see you have this line without position

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

so you should define position:relative/absolute; to be able to have z-index work as expected

so if you do that everything will be ok

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