z-index > css background-img > absolute img > p tag

Question

how to put my p tag above all?

here\'s my code

HTML
    

        

        &l         


        
                      

              相关标签:
       
      

Answer 1

For z-index to work, the element need a position other than static

.key-fundamentals p {
 position: relative;         /*  added property  */
 z-index: 2;
 color: red;
}

.key-fundamentals {
  z-index: -999;
  height: 535px;
  background-image: url('../images/bg-fundamentals.png');
  background-position: center;
  background-repeat: no-repeat;
}

.key-fundamentals .img-man-cbox {
  z-index: 1;
  position: absolute;
}

.key-fundamentals p {
  position: relative;
  z-index: 2;
  color: red;
}

<section class="key-fundamentals">
  <div class="container">
    <img class="img-man-cbox img-responsive" src="http://placehold.it/150/ffffd">
    <p>Our key fundamentals</p>
  </div>
</section>