이미지 위에 div가있는 HTML 위치

큰 이미지가 있고 위의 이미지 위에 가짜 버튼으로 사용하고있는 여러 개의 div가 있습니다. 현재, 절대 위치 지정을 사용하여 원하는 위치에 div를 배치했지만 많은 div가 있으며 시행 착오를 통해 x/y 좌표를 찾는 것은 내가 원하지 않는 시간입니다. 그들을 배치하는 더 쉬운 방법이 있습니까, 아니면 제가 붙어 있습니까?이미지 위에 div가있는 HTML 위치

저는이 프로젝트에서 jQuery와 Javascript를 사용하고 있습니다. 그래서 이들을 솔루션으로 사용할 수 있습니다.

CSS :

#test0 { 
position:absolute; 
    left:381px; 
    bottom:100px; 
}

HTML :

<div id="image"> 
    <div id="test0" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute"> 
     Click me to test Modal! 
    </div> 
    <div id="test1" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute"> 
     Click me to test the same Modal! 
    </div> 
    <img src="testImage.jpg" alt="testtest" /> 
</div>

출처

2012-05-18 SomeKittens

입력의 어떤 종류의 w 실제 좌표를 포함하지 않는 "프로그래밍 방식"솔루션에 제공 할 것으로 기대하십니까? – levik

이 사실을 알게하십시오 : div를 올바른 위치에 놓기를 원하지만 실제로이 브라우저가 브라우저의 위치를 알려주고 싶지는 않습니까? 그래서 그것을 어떻게 찾을 것으로 기대합니까? 마법? 또한,'$ (". button")을 사용하지 않을까요? 전통적인 이벤트 정의 대신에 (function() {$ ("# modal"). dialog ("open");}); – MaxArt

저는 이런 웹 디자인에 익숙하지 않습니다. 요소를 끌 수있는 방법이 있습니까? – SomeKittens

HTML :

<div id="image"> 
<div id="container-of-fake-divs"> 

<div class="fake-div">FAKE DIV</div> 
<div class="fake-div">FAKE DIV</div> 

</div> 

<img src="image.jpg" /> 

</div>

STYLE :

#image { position:relative; } 
#container-of-fake-divs { position:absolute; top:0; left:0; } 
.fake-div { display:block; }

출처

2012-05-18 20:37:49

이미지 위에 div가있는 HTML 위치

답변

관련 문제