Question

我有一张position: relative的图片，它会覆盖一些文字。

有没有办法让文字出现在图像前面？

我尝试弄乱z-index，但无济于事。

这是我的代码

＆＃13;

h2 {
  padding-top: 100px;
}

img {
  position: relative;
  top: -150px;
}

＆＃13;

<h2>1715</h2>
    <div class="img-wrapper">
         <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg" >
    </div>

＆＃13;

Answer 1

h2 {
  padding-top: 100px;
   z-index:1;
  position:relative;
}

img {
  position: relative;
  top: -200px;
  z-index:0;
}

<h2>1715</h2>
    <div class="img-wrapper">
         <img src="https://bootstrapbay.com/blog/wp-content/uploads/2014/05/unslpash-desert-road_uvsq5s.png" >
    </div>

如果您不想更改html结构，请使用

posibble解决方案。

Answer 2

为了使z-index工作，它不能定位为静态（默认）。在这种情况下，尝试position：relative和z-index将起作用。

Answer 3

尝试将这两个元素放在一个position: relative的容器中。

然后，您可以绝对定位孩子并将z-index应用于他们。

我也将文字集中在插图中。

总是要记住：除非您正在使用弹性项目或网格项目，否则必须定位一个元素才能使z-index起作用（details）。

＆＃13;

#container {
  position: relative;
  display: inline-block;
}
h2 {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
img {}

＆＃13;

<div id="container">
  <h2>1715</h2>
  <div class="img-wrapper">
    <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg">
  </div>
</div>

＆＃13;

Answer 4

你可以通过这种方式解决它。

$curl = curl_init($service_url);
$curl_post_data = array(
    'operation' => 'login',
    'username' => $crm_username,
    'accessKey' => md5($crm_token.$crm_useraccesskey),
);

curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $curl_post_data);

＆＃13;

h2 {
     padding-top: 94px;
position: relative;
z-index: 999;
    }

    img {
         position: absolute;
top: 0;
    }

＆＃13;

  h2 {
    padding-top: 94px;
    position: relative;
    z-index: 999;
  }

  img {
    position: absolute;
    top: 0;
  }

＆＃13;

使文本显示在相对定位的图像前面

4 个答案: