Easily position an element over another element in jQuery?

Question

Hello

I need to position a div over an image with jQuery. I can create it with using position:fixed and use top and left to position it using elements offset, but it sucks because the element will not be on top of the element if user scrolls. Any other ideas?

Martti Laine

Answer 1

Create a container div with position:relative. Then place your image inside the div, and also your original div as position:absolute, but in coordinates relative to the container div. eg

<div style='position:relative'>
  <img src='' alt=''/>
  <div id='original' style='position:absolute; top:10px; left:50px'/>
</div>

You can use jQuery to inject some or all of that markup, or change the style but you dont have to use script at all.

Answer 2

If you're doing this multiple places, you can do this:

<div style="position: relative;">
  <div style="position:absolute; width: 276px; height: 110px; z-index: 2;">
    Content here will be on top the image
  </div>
  <img style="width: 276px; height: 110px;" src='http://www.google.com/intl/en_ALL/images/logo.gif' alt="Test Img" />
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

If you match the height/width style attributes on the inner/ouer divs, the inner <div> comes before the <img /> and you give the inner <div> a higher z-index than the image, it'll perfectly overlap the image.

You can see an example of this in action here: http://jsfiddle.net/ZcBus/