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

将CSS position;realtive用于parent＆amp; 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>");

然后，您可以使用CSS属性div，left，right和top相应地定位bottom。

第一张图片上的动态div

3 个答案:

JSFiddle