Javascript JQuery/CSS：使用鼠标坐标和位置追加div:absolute

好的，复杂的一个-我创建了一些代码来在包装器div中附加一个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>');

$（“#容器”）。单击（函数（e）{
var parentOffset=$（this.parent（）.offset（）；
var relX=e.pageX-parentOffset.left；
var relen=e.pageY-parentOffset.top；
$（“#容器”）。追加（“”）；

如果

placeddiv

设置为

位置：绝对；

但是，我的

容器
div故意很大（10000px 10000px），因此我的包装器div有
溢出：scroll

问题在于
placedIV
相对于
容器
不停留在一个位置。它们只相对于
包装
停留在一个位置

我尝试过使用
position:relative
，但是placeddiv“stack”在彼此的顶部（即您不能在第一个placeddiv的上方添加第二个placeddiv）

有人知道怎么解决这个问题吗

（注：我曾尝试创建一个提琴，但即使我复制了本地的逐字记录（只是更改了div的名称以使其更有意义），它也不起作用。以前从未使用过JSFIDLE，所以我可能会做错什么）

感谢您的帮助！
以下几点：

有一个JS打字错误
如果要这样设置位置，需要指定px
您的容器需要有位置：相对
你需要自己解释滚动的原因
查看您的工作小提琴（使用更干净的代码更新）：

$（“#容器”）。单击（函数（e）{
var wrapper=$（this.parent（）；
var parentOffset=wrapper.offset（）；
var relX=e.pageX-parentOffset.left+wrapper.scrollLeft（）；
var relen=e.pageY-parentOffset.top+wrapper.scrollTop（）；
$（this）.append（$（''）.addClass（'placeddiv'）.css({
左：relX，
顶：依靠
}));    
});

这包括了你想要完成的一切吗

$("#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
    }));    
});