z-index> css background-img>绝对img> p标签 [英] z-index > css background-img > absolute img > p tag

问题描述

如何把我的p标签放在首位？

这是我的代码

  HTML 
< section class =key-fundamentals> 
< div class =container> 
 < p>我们的关键基础< / p> 
< / div> 
< / section> 
  

CSS

  .key-fundamentals {
 z-index：-999; 
 height：535px; 
 background-image：url（'../ images / bg-fundamentals.png'）; 
 background-position：center; 
背景重复：不重复; 
} 
 .key-fundamentals .img-man-cbox {
 z-index：1; 
位置：绝对; 
 top：782px; 
 left：80px; 
} 
 .key-fundamentals p {
 z-index：2; 
颜色：红色; 
} 
  

h1标记低于img2图片绝对

当我把zindex -1放到img2图像就会消失。

请帮忙..谢谢！

...

解决方案

为了使 z-index 除了静态

  .key-fundamentals p {
位置：相对; / *添加属性* / 
 z-index：2; 
颜色：红色; 
} 
  

  .key-fundamentals {z-index：-999;身高：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-responsivesrc =http://placehold.it/150/ddd> < p>我们的关键基础< / p> < / div>< / section>  

how to put my p tag above all?

here's my code

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 tag is below img2 image absolute
when i put zindex -1 to img2 the image will disappear.

please help.. thanks!

Thanks in Advance...

解决方案

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/ddd">
    <p>Our key fundamentals</p>
  </div>
</section>

这篇关于z-index> css background-img>绝对img> p标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！