z-index > css 背景图像 > 绝对 img > p 标签答案

【问题标题】：z-index > css background-img > absolute img > p tagz-index > css 背景图像 > 绝对 img > p 标签
【发布时间】：2017-04-16 21:44:49
【问题描述】：

如何将我的 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 时，图像会消失。

请帮忙..谢谢！

在此先感谢...

【问题讨论】：

你能发布一些真实的代码而不是那些奇怪的伪代码吗？
更新你的问题到一个合适的，你会得到一个正确的答案
我只是更新我的代码.. 请检查谢谢
@FReyes 感谢您纠正您的 sn-p。你确定你没有发布LESS/SASS，因为那不是有效的CSS 语法
是的，这是我要更新的 SASS.. 等等

标签： html css

【解决方案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>

【讨论】：

@FReyes 我的回答中是否缺少某些内容，我可以添加或调整以供您接受？