的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 
    }));  
}); 

是否涵盖了您试图完成的一切？