将一个 div 放置在一张图片的上方

Question

我希望定位一个DIV，其中包含Addsense脚本的内容，在我用作横幅的图像的顶部。

我在一个DIV中有img标签。然后我把Google脚本放在一个随后的DIV里，并对其设置了以下样式。

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

下面是广告图片，而不是在它的顶部。有什么想法吗？

- Carlos Blanco

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>

- Jeff B

---

我还为包含图像的div添加了z-index值为2和float:left。 - Carlos Blanco

Answer 2

您需要使用 position: absolute;，并且父元素必须设置为 position: relative。如果没有正确的定位规则，z-index 就毫无意义。

- Bill Criswell

Answer 3

将父元素的position属性设置为relative，子元素的position属性设置为absolute，并在子元素上使用负值的margin属性来移动它到顶部。您甚至可能不需要处理z-index。

- SuperMonteiro

Answer 4

我觉得你缺少了position: relative，以及top的负值。

- Alan Haggai Alavi