body为relative定位时如何将absolute元素定位到页面指定坐标

问题原因 #

当body设置为relative定位时，其内部absolute定位元素的坐标基准为body元素的边界，而你用到的e.pageX/e.pageY是相对于整个文档根节点的全局坐标。如果body本身存在默认margin、或者页面滚动后body的布局位置发生偏移，全局坐标和body内部的相对坐标就会不匹配，最终导致定位偏移。

解决方案1：坐标修正（弹出层跟随页面滚动） #

如果需要弹出层和页面内容一起滚动，只需要在计算坐标时减去body本身的全局偏移量即可，修正后代码如下：

$('.quick-popup-icon').click(function (e) {
  const popup = document.createElement("div")
  // 获取body元素相对于文档的全局偏移量
  const bodyRect = document.body.getBoundingClientRect()
  const bodyOffsetTop = bodyRect.top + window.scrollY
  const bodyOffsetLeft = bodyRect.left + window.scrollX

  // 修正为相对于relative定位body的正确坐标
  popup.style.top = (e.pageY - bodyOffsetTop) + "px"
  popup.style.left = (e.pageX - bodyOffsetLeft) + "px"
  popup.style.position = "absolute"
  // 建议设置高z-index避免被页面原有元素遮挡
  popup.style.zIndex = "999999"

  document.body.append(popup)
})

解决方案2：fixed定位（弹出层固定在视口位置） #

如果不需要弹出层跟随页面滚动，直接用fixed定位完全规避body定位的影响，代码更简单：

$('.quick-popup-icon').click(function (e) {
  const popup = document.createElement("div")
  // fixed定位基准为视口，直接使用客户端坐标即可
  popup.style.top = e.clientY + "px"
  popup.style.left = e.clientX + "px"
  popup.style.position = "fixed"
  popup.style.zIndex = "999999"

  document.body.append(popup)
})

额外优化建议 #

原来的实现中用marginLeft控制水平位置，不如直接使用left属性规范，absolute/fixed定位元素的top/left是官方标准的定位属性，不会和其他margin样式规则产生冲突。

内容的提问来源于stack exchange，提问作者Hanie Asemi