Html 如何在图像上放置 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12679895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I put a div over an image?
提问by Dan Fein
I am trying to put a div over an image so that it acts like a caption, directly ontop of the image.
我试图在图像上放置一个 div，以便它像标题一样直接位于图像之上。
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.
有时标题比其他时间长，所以我无法设置特定的 margin-top:-px 因为有时标题的高度更长。
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>
回答by Mike
Try something like this:
尝试这样的事情：
<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>
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.
你有一些事情要做：
1）你有一个 'a' 标签内的 div。您不应该将块级元素（如 div）放在内联级元素（如 a 的）中。
2) 从图像中移除浮动，将外部 div 的位置设置为相对位置，将内部 div 的位置设置为绝对位置，然后将其绝对定位到包含 div 的顶部。从那里，将大于 0 的 z-index 添加到内部 div 以获得良好的度量，以确保它保持堆叠在图像上方。
回答by Krishna Kumar
Add position:absolute; left:0px;top:0px;z-index: 2;to current div, and add style="position:relative;"in the parent div
添加position:absolute; left:0px;top:0px;z-index: 2;到当前div，并添加style="position:relative;"到父div
<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>
回答by Himanshu Jaju
Use CSS z-index property to align text above image. The element with higher z index appears on the top.
使用 CSS z-index 属性在图像上方对齐文本。z 索引较高的元素出现在顶部。
回答by ews2001
This code should work for what you're trying to do:
此代码应该适用于您要执行的操作：
<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>
回答by Hitesh Sahu
<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>
Result:
结果：
