如何动态地将一个元素定位在另一个元素之上？

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>

- Justin Meltzer

---

你说的“on top”是指页面流中的前面还是字面上的置顶？ - Felix Kling

@Justin 那个其他元素的定位如何？ - Šime Vidas

另一个元素只是页面上的第一个元素，它还没有CSS。 - Justin Meltzer

Answer 1

这更像是一个CSS问题。您需要确保父元素(#video_div)的位置相对(position: relative)，并且插入的元素(即img)是绝对定位(position: absolute)的。

将其钩到左上角，确保它们大小相同，您就成功了。

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

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

- fx_

Answer 2

假设您的意思是在z顺序中直接覆盖它，那么JQuery的.position()方法和绝对定位的组合应该可以解决问题。

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

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

- Christian Mann

---

你能否请展示一下我发布的JS代码的例子？ - Justin Meltzer

我不知道.embedly()是如何工作的，但我会发布一个使用标准JQuery代码的示例。 - Christian Mann