Łatwe pozycjonowanie elementu nad innym elementem w jQuery?

Question

Potrzebuję umieścić div na obrazie za pomocą jQuery. Mogę go utworzyć przy użyciu position: fixed i użyć górnego i lewego, aby ustawić go za pomocą przesunięcia elementów, ale jest do bani, ponieważ element nie będzie znajdował się na wierzchu elementu, jeśli użytkownik przewinie.

Jakieś inne pomysły?

Answer 1

Jeśli robisz to wiele miejsca, można to zrobić:

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

Jeśli dopasować styl height/width atrybuty na wewnętrznych div/Nasze aukcje wewnętrzna <div> pochodzi przed<img /> i dajesz wewnętrzny indeks wyższy niż obraz, to będzie idealnie pokrywał się z obrazem.

Możesz zobaczyć przykład tego działania tutaj: http://jsfiddle.net/ZcBus/

Answer 2

Utwórz div pojemnika z pozycją: względną. Następnie umieść obraz wewnątrz div, a także oryginalny div jako position: absolute, ale we współrzędnych w stosunku do div kontenera. np

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

Można użyć jQuery wstrzyknąć niektóre lub wszystkie z tej znaczników, lub zmienić styl, ale nie trzeba użyć skryptu w ogóle.