如何在图像上放置div？ [英] How can I put a div over an image?

问题描述

我试图在图片上放置一个div，使其像图片一样直接显示在图片顶部。

I am trying to put a div over an image so that it acts like a caption, directly ontop of the image.

有时候标题比其他时候长所以我不能设置一个特定的margin-top：-px，因为有时候的字幕的高度较长。

Sometimes the caption is longer than other times so I can't set a specific margin-top:-px because sometimes the height of the caption is longer.

我试过这个和链接的背景）不显示，也像我刚才说的，标题高度改变，因此这个方法是垃圾：

I tried this and the background of the link (black) does not show, also like I just stated, the caption height changes so this method is garbage:

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

推荐答案

尝试这样：

<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）放在内联级元素（如a）中。

2）从图像中删除浮点，将外div的位置设置为relative，将内div的位置设置为绝对，然后绝对定位到包含div的顶部。从那里，添加大于0的z-index到内部div，以确保它保持堆叠在图像上方。

You had a few things going on:
1) You had a div inside an 'a' tag. You shouldn't put block level elements (like divs) inside inline level elements (like a's).
2) Remove the float from the image, set your outer div's position to relative and your inner div's position to absolute, then absolutely position it to the top of the containing div. From there, add a z-index greater than 0 to the inner div for good measure, to ensure it stays stacked above the image.

这篇关于如何在图像上放置div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！