你如何动态地将一个元素置于另一个元素之上？

Question

我用jQuery动态地附加一些html,我想直接在另一个元素的顶部插入它.我该怎么做呢？

这是我的application.js文件中的代码:

$(document).ready(function() {
$('a.oembed').embedly({maxWidth:300,'method':'replace'}).bind('embedly-oembed', function(e, oembed){
      $("#video_div").append($("<img>", { src: oembed.thumbnail_url, width:200 }));
   });
});

图像是动态插入的,我希望它直接在这上面:

<div id="video_div"><%= link_to 'video', @video.video_url, :class => 'oembed' %></div>

Answer 1

这更像是一个CSS问题.你想确保父元素(#video_div)位于相对位置(位置:相对),插入元素(img)绝对定位(位置:绝对)

将它钩在左上方,确保它们的大小相同,你就是金色的.

#video_div {
  position: relative;
  width: 300px;
  height: 300px;
}

#video_div img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 300px;
}

Answer 2

假设您的意思是直接在 z 顺序的顶部（将其遮住），JQuery 的.position()方法和绝对定位的组合应该可以解决问题。

$('<div>New Element</div>').css({
    "position" : "absolute",
    "left"     : $foo.position().left,
    "top"      : $foo.position().top
}).appendTo($container);

注意：$container必须同时包含动态生成的元素和目标元素。