如何在图片上方放置一个div？

Question

我试图将一个div放在图片上方，使其像标题一样直接覆盖在图片上。

有时标题比其他时间更长，因此我无法设置特定的margin-top：-px，因为有时标题的高度更长。

我尝试了这个方法，链接的背景色（黑色）不显示，而且正如我刚才所说，标题的高度会改变，因此这种方法是无用的：

 <div>  

  <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;">
   <a href="LINK" ><div style="width:210px;background-color:black;color:white;bottom:0;margin-top:-20px;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>

 </div>

- Thingamajig

---

为什么不直接使用 background-image？ - Roddy of the Frozen Peas

Answer 1

试试像这样的代码：

<div style="position:relative;">  

  <img src = "<? echo $image_url ?>" style="min-width:220px;max-width:220px;">
   <div style="position:absolute;width:210px;background-color:black;color:white;top:0;left:0;padding-left:10px;padding-top:10px;font-size:16px;z-index:5;"><a href="LINK" ><? echo $title ?></a></div>

</div>

你的代码有几个问题：
1) 你把一个 div 放在了 'a' 标签内。你不应该把块级元素（比如 div）放在行内元素（比如 a）内。
2) 从图片中移除 float，在外部 div 中设置 position 属性为 relative，内部 div 的 position 属性为 absolute，并将其绝对定位到容器 div 的顶部。此后，给内部 div 添加一个 z-index 大于 0 的属性以确保其在图片上方叠放。

- Mike

---

这个很好用！记录在其他帖子中，如果其他用户有同样的问题，我只是把top:0改成了bottom:0，它做到了我需要的效果！非常感谢！ - Thingamajig

这基本上起作用了。不过在我的情况下，我不得不将 display: inline-block 添加到外部 div 中。 - Eric Terry

Answer 2

在当前div中添加position:absolute; left:0px;top:0px;z-index: 2;，并在父div中添加style="position:relative;"

<div style="position:relative;">  

  <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;">

<a href="LINK" ><div style="position:absolute;z-index: 2;left:0px;top:0px;width:210px;background-color:black;color:white;bottom:0;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>

- Krishna Kumar

---

这似乎是正确的方向，我该如何使链接div到底部而不是顶部：我尝试了bottom:0px;而不是top:0px。 - Thingamajig

这取决于图像的大小，如果图像的高度大于div的高度，那么bottom:0px;应该可以起作用。 - Krishna Kumar

Answer 3

这段代码应该可以实现你想要做的事情：

<div style="background: transparent url('<? echo $image_url ?>') no-repeat 0 0; padding: 10px 0 10px 10px; width: 200px;"><a href="LINK"><? echo $title ?></a></div>

- ews2001

Answer 4

使用CSS的z-index属性来使文本在图像上方对齐。具有较高z-index值的元素将显示在顶部。

- Himanshu Jaju

Answer 5

<div style="position:relative;">  

<img  style=" border-radius: 10px 10px 10px 10px; 
              width: auto;
              height: 250px"

       src = "https://images.pexels.com/photos/904276/pexels-photo-904276.jpeg?auto=compress&cs=tinysrgb&h=350" 
      >

  <div style="position:absolute;
               width:100%;
               background-color:rgba(255, 255, 255, 0.3);
               color:white;
               bottom:0;
               left:0;
               padding-left:15px;
               font-size:17px;
               z-index:5;">
    <h3 style ="color:white">Title</h3>
    <h4 style ="color:white">Sub Title</h4>
    <p> Lorel Ipsum Blah blah </p>
  </div>

</div>

结果：

请看 Hitesh Sahu 在 CodePen 上的作品：zJPvOB，他的账号是 @hiteshsahu。

.

- Hitesh Sahu