글을 읽기 전에 우선 말씀드릴 점이 있다면...
전 이 방식이 맘에 들지 않습니다.
뭔가 더 효율적인 방법이 있을 것 같은데, 잘 모르겠어서 -_-; 우선 저도 이 방법으로 조치하긴 했습니다만
뭔가 꺼림찍 하군요~
엘리먼트를 웹브라우저의 body 위치로부터 적당한 위치에 자리를 잡게 하고 싶습니다.
문제가 되는 것은 자리를 잡게 하고 싶은 엘리먼트가 다른 엘리먼트 내에 속해 있어서 정확한 자리를 찾아내기가 어려울 경우 입니다.
<div style="position:absolute; top:20px; left:3px;">
<div id="wow" style="position:absolute; top:30px; left; 120px;">와우</div>
</div>
</div>
이런 경우!!! 혹은 이보다 더 중첩되어 있는 경우에 body로 부터의 위치를 잡기가 참 힘듭니다.
jQuery를 이용해서 'wow'의 위치를 잡아보려고 했습니다.
브라우저로 부터 위는 40px, 왼쪽으로부터 50px 떨어뜨리고 싶은 건데요~
실제로 wow의 바로 상위 엘리먼트가 이미 20px, 3px 떨어져 있기 때문에 60px, 50px씩 떨어지게 됩니다.
이런것 까지 다 계산해서 거리를 계산해 주는 jQuery 함수가 있을 것 같아서 검색해 봤는데, 잘 모르겠더군요~
offsetParent() 라는 함수가 있는데, 이건 position 지정에 영향을 주는 바로 상위 객체를 찾아주는 함수더군요
중첩에 중첩에 중첩이 되어 있다면 찾기가 영 -_-;
아예 position을 fixed로 잡아서 해 보려고 했는데, IE에서는 잘 안됩니다. FF에서는 잘 되는데....
그래서 할 수 없이 offsetParent()로 body까지 올라가면서 값을 다 더해서 구했습니다 -_-; 뭔가 찝찝...
do {
mypos += partemp.position().top;
mxpos += partemp.position().left;
partemp = partemp.offsetParent();
} while(partemp[0].tagName != 'BODY')
mypos와 mxpos를 사용하면 됩니다... wow 의 위치를 얻어낼 수 있군요~
브라우저를 기준으로한 wow의 위치를 세트 시키려면, css의 top과 left를 설정할 때 mypos와 mxpos를 빼 주면 되겠죠?
흠~ 혹 이 글을 읽는 분들 중 더 좋은 방법을 아는 분 있으면 댓글 부탁드립니다!