Jquery 如何根据光标单击的位置定位弹出div

我正在尝试在下面放置一个弹出div：

<div style="display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div>

---

但是上面甚至不会显示div

请尝试将

位置：绝对

添加到您的div中。确保它不位于具有相对定位的另一个div中

<div style="position: absolute; display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div>

Hi

---

顶部和左侧仅适用于具有

相对位置

、

绝对位置

或

固定位置

的元素。

问题在于偏移（）无法返回正确的鼠标位置，请改为尝试event.pageX和event.pageY：

<div style="position: absolute; display:none;height:200px;width:200px;border:3px solid green;" id="popup">Hi</div>

$(document).ready(function(){
    $('div#d').bind('click', function (event) {
    $('#popup').css('left',event.pageX);      // <<< use pageX and pageY
    $('#popup').css('top',event.pageY);
    $('#popup').css('display','inline');     
    $("#popup").css("position", "absolute");  // <<< also make it absolute!
    });
});

$（文档）.ready（函数（）{
$（'div#d'）.bind（'click'，函数（事件）{
$（'popup'）.css（'left'，event.pageX）；//这对显示div很有效，谢谢，但它不是将div定位在光标单击的位置。请确保div不在具有相对定位的其他对象内？尝试将其作为正文中的第一项或最后一项。如果包含的元素是position:absolute或relative，则定位popup绝对会使它相对于容器而不是页面出现。为了便于参考和改进，这里是JSFIDLE：