style="position:relative"를 쓸때 유의점

카페 > Coder_Club | nothinking
http://cafe.naver.com/nothinking/64

<div style="" id="block01">

<div style=" top:10; left:10" onclick="alert(event.x)" id="block02"></div>

</div>

위와 같이 코딩을 했을 때 block02의 위치와 event.x의 값은 무엇일까?

block02의 위치는 block01의 left-top이 기준이 되어서 그 기준점으로 부터 가로 10, 세로 10 픽셀 떨어진 지점부터 위치하게 됩니다. event.x의 값도 마찬가지로 block02의 모서리점을 기준이로 값을 나타냅니다.

이는 아주 유용한 기능입니다. 영역 계산이 아주 용이하기 때문입니다.

하지만 relative블럭 안에서 window를 기준으로 event.x의 값을 알고 싶을 때는 문제가 생길 수도 있습니다.

여기에 대한 해결책은 아직 모릅니다.

아시는 분은 코멘트를 달아주세요~^^