Is it easy to position an element over another element in jQuery?

Question

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

Any other ideas?

Answer 1

If you do this a few 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 map style / height attributes on inner / ouer divs, the inner <div> comes before <img /> and you give the inner <div> a higher z-index than the image, it will perfectly overlap the image.

Here you can see an example of this: http://jsfiddle.net/ZcBus/

Answer 2

Create a div container with the position: relative. Then place your image inside the div, as well as your original div as a position: absolute, but in coordinates relative to the div container. 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 this markup or change the style, but you don't need to use a script at all.