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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

z-index＆gt; css background-img＆gt;绝对img＆gt; p标签

1 个答案: