¿Posiciona fácilmente un elemento sobre otro elemento en jQuery?

Question

Necesito colocar un div sobre una imagen con jQuery. Puedo crearlo usando position: fixed y usar la parte superior e izquierda para colocarlo usando elementos de compensación, pero es una mierda porque el elemento no estará en la parte superior del elemento si el usuario se desplaza.

¿Alguna otra idea?

Answer 1

Si estás haciendo esto varias lugares, usted puede hacer esto:

<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Si coinciden con los atributos de estilo height/width en los divs/ouer interiores, el interior <div> viene antes de la<img /> y le da al interior <div> un índice Z más alto que la imagen, se superpondrá perfectamente a la imagen.

Puede ver un ejemplo de esto en acción aquí: http://jsfiddle.net/ZcBus/

Answer 2

Cree un contenedor div con la posición: relativa. Luego coloque su imagen dentro del div, y también su div original como posición: absoluta, pero en coordenadas relativas al contenedor div. por ejemplo

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

Puede usar jQuery para inyectar parte o la totalidad de ese margen de beneficio, o cambiar el estilo, pero usted no tiene que usar la escritura en absoluto.