JavaScript如何修改元素定位的参考像素点位置

有两种常用方案可以实现将定位参考点从左上角修改为左下角，按需选择即可：

• 方案1：配合CSS transform-origin 属性实现（最简便）
  如果是用transform: translate()做元素位移，直接设置参考点为左下角即可，后续所有位移操作都会自动以左下角为基准：

.target-element {
  position: absolute;
  /* 把变换参考点设为左下角 */
  transform-origin: left bottom;
  /* 示例：将元素左下角定位到距离父容器左100px、上200px的位置 */
  transform: translate(100px, 200px);
}

• 方案2：JS侧手动偏移计算（兼容left/top原生定位场景）
  原生left、top属性的参考点固定为元素左上角，只需要在设置坐标时，把目标y坐标减去元素自身高度，即可实现左下角对齐目标点：

const el = document.querySelector('.target-element')
// 期望元素左下角对齐的目标坐标
const targetX = 100
const targetY = 200
// 获取元素自身总高度（包含padding、border，不包含margin）
const elHeight = el.offsetHeight
// 计算得到实际需要设置的top值：目标y坐标减去元素高度
const realTop = targetY - elHeight

el.style.left = `${targetX}px`
el.style.top = `${realTop}px`

补充说明：如果元素高度是动态变化的，每次更新定位时重新获取元素高度计算即可。如果需要设置其他参考点（比如中心点），同理偏移对应宽高的一半即可。

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