如何設置相對元素的絕對位置？

經過一些簡化，問題是我不知道如何在用戶點擊第一個圖像時將圖像設置爲另一個圖像。在this fiddle中更容易看到這一點。如何設置相對元素的絕對位置？

有什麼問題？我相信問題是「相對」div＃問題元素。如果你從CSS中刪除「位置：相對」，一切正常，但我需要這裏的親戚。

另外，我注意到，如果我改變了「引腳容器」來替代一個一切工作正常（從HTML標籤直接待定），但我需要的「針容器」的相對DIV內。

真正的問題是什麼？我認爲.offset()將給我的位置相對於文件如在documentation和.offset(coordinates)將做相同。

注意：這個想法是黑盒應該出現在大圖像相同的座標，但它似乎放錯了位置。

NOTE2：我不知道是不是這個問題，但我正在使用Chrome和Firefox在Ubuntu Linux上工作。兩個瀏覽器都顯示黑盒放錯位置。

NOTE3：目標是取大圖像的座標，並使用absolute定位在相同位置上設置一個小方框。沒有任何技巧像將黑色框中的大圖像設置爲相同的margin，對不起。

來源

2012-12-10 Ivan

我對你想要發生的事情有點困惑。當我點擊圖片時，一個黑色的方塊出現在它上面。它應該出現在特定的地方嗎？ –

顏色我也困惑。你正在獲得父'img'的'offset'並將其應用到你正在添加的黑盒子。它按照我的預期工作，但我懷疑這是你想要做的。你是否試圖把盒子放在鼠標點擊的地方？ –

@ExplosionPills對不起，黑匣子應該出現在與大圖像相同的偏移位置，但它看起來偏移了一些像素向下和向右 – Ivan

.offset()找到元素相對於文檔的位置。您似乎想使用.position()來查找relative容器內的位置。

見http://jsfiddle.net/T7czp/200/

您還需要辦理原始圖像具有裕度，並與.css()

來源

2012-12-10 17:34:33

.offset()應用新維度返回元素相對於整個文檔位置。你想要得到的位置相對於的抵消父母（在這種情況下爲#inner）。這就是.position()的用途。

$("img").click(function() { 
    var offset = $(this).position(); // not offset! 
    var $pin = $('<img>') 
      .addClass('pin') 
      .attr('src', "http://208.86.154.173/shared/images/black_box.png") 
      .css({top: offset.top, left: offset.left}); //.offset() works, but shouldn't 
    $("#pins").append($pin); 
});

添加的5px的保證金到引腳（同緣這對原始圖像），並且銷正好出現在圖像的左上角。

來源

2012-12-10 17:34:44 cHao

如何設置相對元素的絕對位置？

回答

相關問題