jquery - 第一个图像上的动态 div

Question

我正在使用下面的代码用 jquery 创建一个动态 div 并将其显示在第一个图像下。一切都很好。

但是如何将这个动态 div 放在我的图像上而不是下面呢？

<script type="text/javascript">
$(document).ready(function() {                       
$(".gdl-blog-full").find("img:first").after("<div style='width:800px; height:90px; float: left; margin-top:10px;'><a href='http://www.demo.com'>MyLink</a></div>");
});
</script>

机身内部：

<div class="gdl-blog-full" style="width:650px; height:390px;">
<img src="myimage.jpg" alt="4134ed_L" width="650" height="390" class="alignnone size-full wp-image-8500">
</div>

Answer 1

只需添加以下CSS

top:0; //moves to top of the image which you need
position: absolute;

使用absolute位置，您可以定位元素，但要确保响应。

JSFiddle

Answer 2

将 CSSposition;realtive用于父级和子position:absolute级。 https://developer.mozilla.org/en-US/docs/Web/CSS/position 使用z-index将元素置于上方或下方。

Answer 3

您div将需要一个z-index财产并且需要定位absolute。

像这样：

$(".gdl-blog-full").find("img:first").after("<div style='position: absolute; z-index: 9999; width:800px; height:90px; float: left; margin-top:10px;'><a href='http://www.demo.com'>MyLink</a></div>");

然后，您可以div使用 CSS 属性left、和来定位您的相应位置。righttopbottom