javascript - How can I position a div relative to a list item? -

i have unordered list of pictures, , when hover on 1 want 2 pictures left fade out, , div appear in place text. i've gotten working, except positioning div - i've tried this:

div.position({my: 'left top', at: 'left top', of: other_list_item}); 

but returns object ( new location ) of {left: 0, top: 0}.

i've tried putting div in li element, it's still no-go. here's div html:

<div style="width: 255px; height: 110px; position: absolute;" id="name_popup"><p>jon jensen</p><p>chief technical officer</p><p>london, england</p></div> 

edit i'm working on jsfiddle example, there's kind of lot put in, idk when it'll ready. anyways, forgot mention bit of fun:

when call .position() on element i'm trying anchor to, returns correct offsets, when try use position() on other element match positions, nothing happens.

i did not quite understand question, reasoning trying position new divs in place of faded out images, here code fit situation

$('div').click(function(){     //get positions of divs faded out     var prev_position = $(this).prev('div').position();     var next_position = $(this).next('div').position();     //create , position new divs     $(this).insertbefore('<div style="position:absolute;top:' +prev_position.top+ 'px;left:' +prev_position.left+ 'px;">replacing div</div>');     $(this).insertafter('<div style="position:absolute;top:' +next_position.top+ 'px;left:' +next_position.left+ 'px;">replacing div</div>');     //hide divs     $(this).prev('div').fadeout();     $(this).next('div').fadeout(); }); 

sometimes, if parent element has position set, .position() position relative parent element, , depending in needs might throw off design. instead coordinates of previous , next divs relative window , these:

    function getposition($el){         //get offset coordinates of clicked link         var offset = $el.offset();         var top = offset.top;         var left = offset.left;         //get position of link relative window         var rel_top = top - $(window).scrolltop();         var rel_left = left - $(window).scrollleft();     }