在图像顶部放置一个div

Question

我希望在我用作横幅的img上添加一个带有addsense脚本内容的DIV。

我在div中有img标签。然后我将谷歌脚本放在下面的div中并将此样式设置为

style="float:right;left:250;z-index:2"

添加内容显示在img下方而不是顶部。任何想法??

Answer 1

您想要使用absolute定位第二个div：

http://jsfiddle.net/sbNZu/

相关代码：

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>

Answer 2

您需要使用position: absolute;，父母必须为position: relative。如果没有适当的位置规则集，z-index就意味着蹲下。

Answer 3

我认为您遗失了position: relative，而top则为负值。

Answer 4

让父级为position: relative，子级为position: absolute，并对子级边距使用负值将其移动到顶部。您甚至可能不需要处理z-index。