如何在图像上添加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>

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）你在'a'标签内有一个div。你不应该将块级元素（如div）放在内联级别元素（如a）中 2）从图像中移除浮动，将外部div的位置设置为相对，将内部div的位置设置为绝对，然后将其绝对定位到包含div的顶部。从那里，将大于0的z-index添加到内部div以获得良好的度量，以确保它保持堆叠在图像上方。

Answer 2

将position:absolute; left:0px;top:0px;z-index: 2;添加到当前div，并在父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>

Answer 3

使用CSS z-index属性对齐图像上方的文本。 z索引较高的元素出现在顶部。

Answer 4

此代码适用于您尝试执行的操作：

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

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>

结果：

请参见zJPvOB上的Hitesh Sahu（@hiteshsahu）的钢笔CodePen。