레이어 팝업 위치?? 여러개의 li 각각 우측으로

질문제목도 어떻게 써야 할지 모르겠네요

가로 4개씩 아래쪽으로 쭉 출력되는 갤러리? 형식의 구조입니다.

<div>

<li id="abc_1"><span>버튼</span>이미지/글</li>

<li id="abc_2"><span>버튼</span>이미지/글</li>

<li id="abc_3"><span>버튼</span>이미지/글</li>

<li id="abc_4"><span>버튼</span>이미지/글</li>

.

.

.

.

</div>

여기에서 이미지/글 위에 있는 버튼들이 각각 존재하구요.

이 버튼들을 클릭하면 각 내용에 해당하는 내용의 팝업이

화면 중앙에 레이어 팝업으로 뜨고 있습니다.

이 중앙에 뜨는 레이어 팝업의 위치를 각각 li 영역의 우측으로 나오게 하고 싶은데요.

event.pageX, Y 등등은 사용할 수 없는 상황이라

저 li의 위치를 좌표로 얻어서 topr과 left로 불러오고자합니다. 

그런데 li각각을 지정못해서(??) 제일 첫번째 li위치에서만 팝업이 뜹니다.ㅠㅠ

아래 소스를 조금만 수정하면 될것 같은데

li의 위치를 각각 얻어서 top과 left로 넘길 수 있을까요??

var
          $this = $(this),
          //$w = $(window);

            var lis = $('[id^="abc_"]');
            var pos = lis.position();
    

            $this.css({
                position: "absolute",
                top: (pos.top) + "px",
                left: (pos.left) + "px"

            });
 

이렇게 넣었더니 top,50 left, 0(첫번째 li 위치값)으로 고정되어버리네요ㅠㅠ