的JQuery/CSS：使用鼠標COORDS和位置追加DIV：絕對

Question

OK複雜的一個 - 我已經創造了一些代碼來包裝專區內追加一個div：

$("#container").click(function(e){ 
    var parentOffset = $(this).parent().offset(); 
    var relX = e.pageX - parentOffset.left; 
    var relY = e.pageY - parentOffset.top; 

$('#container').append('<div class="placeddiv" style="left:' + relX + '; top:' + relY +';"></div>'); 

如果placeddiv設置爲這個工程確定position: absolute;

但是，我的container div有意大（10,000px乘10,000px），因此我的包裝div有overflow:scroll。

問題是placeddivs不要停留在相對於container的一個位置。他們只保留相對於wrapper的位置。

我已經嘗試過使用position:relative，但是然後在彼此之上放置了placementdivs'stack'（即，您不能在第一個上面添加第2個放置的div）。

有沒有人知道解決這個問題的方法？ （PS：我試圖創建一個小提琴http://jsfiddle.net/7WQ5Q/20/，但即使我已經從我的本地逐字複製（只更改div的名稱是更有意義）它不會工作。以前從未使用過JSFiddle所以我可以做一些事情錯）

任何幫助表示讚賞！

Answer 1

幾件事情：

1. 有一個JS錯字
2. 你需要指定px，如果你要設置這樣的位置。
3. 你的容器需要有位置：相對
4. 你需要考慮滾動自己

見從你的分叉這方面的工作小提琴（更新，更乾淨的代碼）： http://jsfiddle.net/wWEqP/5/

$("#container").click(function(e){ 
    var wrapper = $(this).parent(); 
    var parentOffset = wrapper.offset(); 
    var relX = e.pageX - parentOffset.left + wrapper.scrollLeft(); 
    var relY = e.pageY - parentOffset.top + wrapper.scrollTop(); 

    $(this).append($('<div/>').addClass('placeddiv').css({ 
     left: relX, 
     top: relY 
    }));  
}); 

是否涵蓋了您試圖完成的一切？