jQuery에서 다른 요소 위에 요소를 쉽게 배치 할 수 있습니까?

Question

jQuery를 사용하여 이미지 위에 div를 배치해야합니다. 나는 position: fixed을 사용하여 그것을 만들 수 있고 위쪽과 왼쪽으로 요소 오프셋을 사용하여 위치를 지정할 수 있지만 사용자가 스크롤하면 요소가 요소의 맨 위에 있지 않기 때문에 싫증이납니다.

다른 아이디어?

Answer 1

, 당신은이 작업을 수행 할 수 있습니다 : 당신이 height/width 스타일 내부/ouer의 div의에 속성이 일치하면

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

, 내부 <div>이 올 <img /> 전 그리고 내부에 <div>의 이미지보다 높은 z- 인덱스를 지정하면 이미지와 완벽하게 겹칠 것입니다.

여기에 실제 적용되는 예를 볼 수 있습니다. http://jsfiddle.net/ZcBus/

Answer 2

position : relative를 사용하여 컨테이너 div를 만듭니다. 그런 다음 이미지를 div에 배치하고 원래 div도 position : absolute로 배치하지만 컨테이너 div에 상대적인 좌표로 배치합니다. 예 :

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

jQuery를 사용하여 해당 마크 업의 일부 또는 전부를 삽입하거나 스타일을 변경할 수 있지만 스크립트를 전혀 사용하지 않아도됩니다. 이 여러 장소를하고 있다면