你如何動態地將一個元素放在另一個元素的上面？

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