如何定位一個相對於列表項目的div？

我有一張無序的圖片列表，當我將鼠標懸停在一張圖片上時，我希望左邊的兩張圖片淡出，一個div顯示在文本的位置上。我已經得到了這個工作，除了定位格 - 我已經試過這樣：如何定位一個相對於列表項目的div？

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

但只是返回的對象（新位置）{左：0，上：0}。

我也試過把div放在另一個li元素中，但它仍然是一個不行。這裏是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>

編輯我工作的一個例子的jsfiddle，但有一種很多擺在，所以IDK的時候會做好準備。無論如何，我忘了提到這一點的樂趣：

當我調用.position（）本身在我試圖錨定的元素上，它會返回正確的偏移量，但是當我嘗試使用position（）在其他元素上以匹配他們的位置，沒有任何反應。

來源

2013-07-31 Cornholio

你可以創建一個jsFiddle來演示這個問題嗎？ –

我會嘗試獲得一個簡單的假工作 - 但是，這些圖片是私人的，我一直在使用Chrome的開發人員工具進行大部分工作，直到我得到它的工作 – Cornholio

因此，使用相同大小的假圖片 – feitla

我不太明白的問題，但是從我的推理，我得到您試圖替代淡出圖像來定位新的div，所以這裏是一些代碼，可能適合你的情況

$('div').click(function(){ 
    //get the positions of the divs to be faded out 
    var prev_position = $(this).prev('div').position(); 
    var next_position = $(this).next('div').position(); 
    //create and 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 the divs 
    $(this).prev('div').fadeOut(); 
    $(this).next('div').fadeOut(); 
});

有時，如果你的父元素有一個位置設置，那麼.position（）將獲得相對於父元素的位置，根據你的需要，這可能會拋棄你的設計。所以相反，你可以得到上一個和下一個div相對於WINDOW的座標，你可以得到像這樣的：

function getPosition($el){ 
     //get the offset coordinates of the recently clicked link 
     var offset = $el.offset(); 
     var top = offset.top; 
     var left = offset.left; 
     //get position of this link relative to the window 
     var rel_top = top - $(window).scrollTop(); 
     var rel_left = left - $(window).scrollLeft(); 
    }

來源

2013-07-31 19:39:09 lomas09

如何定位一個相對於列表項目的div？

回答

相關問題