Positionnez facilement un élément sur un autre élément de jQuery?

Question

J'ai besoin de positionner un div sur une image avec jQuery. Je peux le créer en utilisant position: fixed et utiliser le haut et le gauche pour le positionner en utilisant des éléments décalés, mais ça craint parce que l'élément ne sera pas au-dessus de l'élément si l'utilisateur fait défiler.

D'autres idées?

Answer 1

Si vous faites cela plusieurs endroits, vous pouvez le faire:

<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 vous correspondez à la height/width attributs de style sur les divs internes/de ouer, la <div> intérieure vient avant le <img /> et vous donnez à l'intérieur <div> un z-index plus élevé que l'image, il va parfaitement chevaucher l'image.

Vous pouvez voir un exemple de ceci en action ici: http://jsfiddle.net/ZcBus/

Answer 2

Créer un conteneur div avec la position: relative. Placez ensuite votre image à l'intérieur du div, ainsi que votre div d'origine en tant que position: absolute, mais en coordonnées par rapport au div conteneur. par exemple

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

Vous pouvez utiliser jQuery pour injecter tout ou partie de ce balisage, ou changer le style mais vous ne devez pas utiliser le script du tout.