Geek asks and answers

How do you dynamically position one element on top of another?

I am dynamically adding some html with jQuery and I want to paste it directly on top of another element. How to do it?

this is the code in application.js file:

$(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 }));
   });
});

The image is inserted dynamically, and I want it to be directly on top of this:

<div id="video_div"><%= link_to 'video', @video.video_url, :class => 'oembed' %></div>
+3
source share
2 answers

This is more like a CSS question. You want to make sure that the parent element (#video_div) is relative (position: relative) and the inserted element (img) is set absolutely (position: absolute)

Lift it in the upper left corner, make sure they are the same size and you are gold.

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

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

, ( ) z-, JQuery . position() .

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

: $container , .

+4

More articles:


All Articles