Html 在图像顶部放置一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4218204/
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
position a div on top of an image
提问by Carlos Blanco
I want position a DIV with the content of an addsense script on top of a img that I use as a banner.
我想在用作横幅的 img 顶部放置一个带有 addense 脚本内容的 DIV。
I have the img tag inside a div. then I put the google script inside a following div and set this style to it
我在 div 中有 img 标签。然后我将 google 脚本放在下面的 div 中并将此样式设置为它
style="float:right;left:250;z-index:2"
The add is shown below the img and not on top of it. Any ideas??
添加显示在 img 下方，而不是在其顶部。有任何想法吗？？
回答by Jeff B
You want to position the second div with absolute:
您想使用以下内容定位第二个 div absolute：
Relevant code:
相关代码：
img {
border: 2px solid black;
}
#container {
position: relative;
}
#example {
position: absolute;
top: 10px;
left: 10px;
padding: 5px;
background-color: white;
border: 2px solid red;
}<div id="container">
<img src="https://placekitten.com/g/193/129">
<div id="example">This is my div</div>
</div>回答by Bill Criswell
You need to use position: absolute;and the parent must be position: relative. Without a proper position rule set z-index means squat.
您需要使用position: absolute;并且父级必须是position: relative. 没有适当的位置规则集 z-index 意味着深蹲。
回答by Alan Haggai Alavi
I think you are missing position: relative, and a negative value for top.
我认为您缺少position: relative，并且为top.
回答by SuperMonteiro
Have the parent with position: relative, the children with position: absolute, and use negative values for margin on the children to move it on top. You may not even need to deal with z-index.
让父级具有position: relative，子级具有position: absolute，并使用负值作为子级的边距以将其移动到顶部。您甚至可能不需要处理 z-index。
