Question

确定复杂的 - 我已经创建了一些代码来在包装器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>');

如果placeddiv设置为position: absolute;

，则此工作正常

然而，我的container div故意很大（10,000px乘10,000px），因此我的包装div有overflow:scroll。

问题是placeddivs不会停留在相对于container的一个位置。它们仅相对于wrapper保持定位。

我已经尝试过使用position:relative，但随后又将putdivs'堆栈'放在彼此之上（即你不能在第一个上面添加第二个放置的数据）。

有没有人知道解决这个问题？

（PS：我试图创建一个小提琴http://jsfiddle.net/7WQ5Q/20/，但即使我已经从我的本地逐字复制（只是更改div的名称更有意义）它不会工作。从来没有使用过JSFiddle所以我可以做错了什么）

感谢任何帮助！

Answer 1

一些事情：

有一个JS拼写错误
如果要设置这样的位置，则需要指定px。
您的容器需要有位置：relative
您需要考虑自己滚动

看看你的这个工作小提琴（用更干净的代码更新）： 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
    }));    
});

这涵盖了你想要完成的所有事情吗？

JQuery / CSS：使用鼠标坐标和position：absolute附加div

1 个答案: