html - z-index > css 背景图像 > 绝对 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图片
当我将 zindex -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>