z-index> css background-img>絕對img> p標記

Question

如何將p標記放在首位？

這裏是我的代碼

HTML 
    <section class="key-fundamentals"> 
     <div class="container"> 
     <img class="img-man-cbox img-responsive" src="images/img-man-cbox.png"> 
      <p>Our key fundamentals</p> 
     </div> 
    </section> 

CSS

.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; 
    top: 782px; 
    left: 80px; 
} 
.key-fundamentals p{ 
z-index: 2; 
color: red; 
} 

h1標籤低於IMG2圖像絕對
當我把Z-索引-1 IMG2圖像將消失。

請幫忙..謝謝！

在此先感謝...

Answer 1

對於z-index正常工作，元件需要比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/ddd"> 
 
    <p>Our key fundamentals</p> 
 
    </div> 
 
</section>