如何動態地將一個元素置於另一個元素之上？

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必須包含動態生成的元素和目標元素。