Как вы динамически размещаете один элемент поверх другого? - PullRequest
Новая
       2

Как вы динамически размещаете один элемент поверх другого?

3 голосов
/ 14 марта 2011

Я динамически добавляю html с помощью jQuery и хочу вставить его прямо поверх другого элемента. Как мне это сделать?

это код в моем файле 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>

Ответы [ 2 ]

6 голосов
/ 14 марта 2011

Это больше похоже на вопрос CSS.Вы хотите убедиться, что родительский элемент (#video_div) расположен относительно (position: относительный), а вставленный элемент (img) расположен абсолютно (position: absolute)

Поднимите его в верхнем левом углу, сделайтеуверен, что они одного размера, а ты золотой. 

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

#video_div img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 300px;
}
4 голосов
/ 14 марта 2011

Предполагая, что вы имеете в виду непосредственно поверх него (скрывая его) в z-порядке, комбинация метода JQuery .position () и абсолютного позиционирования должна помочь. 

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

Примечание: $container должно содержать как динамически сгенерированный элемент, так и целевой элемент.

...