Javascript 将元素添加到相对位置的div

我正在尝试建立一个类似于中档突出显示功能的东西。 在click事件中，我需要添加一个元素，该元素将位于用户单击的父对象的

位置：绝对
（不是主体，因为父对象是
溢出：滚动；
）

问题是在正确的位置添加标记元素

如何找到用户突出显示内容的顶部和左侧位置
如何添加相对于article元素的标记？每当用户滚动时，我需要mark元素停留在突出显示的文本上
我试图用下面的代码设置它们

mark.setAttribute("style", `top:${top}px`);
mark.setAttribute("style", `left:${left}px`);



const article=document.querySelector（`article`）；
article.addEventListener（'mouseup'，函数（）{
var result=window.getSelection（）.toString（）；
constoldmark=document.querySelector（`.mark`）；
如果（旧马克）{
第条：removeChild（oldMark）；
}
window.getSelection（）.empty（）
如果（结果）{
让mark=document.createElement（'mark'）；
mark.innerText=`${result}`；
mark.classList.add（'mark'）；
var-top=5；
左变量=15
mark.setAttribute（“style”，`top:${top}px`）；
mark.setAttribute（“style”，`left:${left}px`）；
第三条儿童（标志）；
}
});
main{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
对齐项目：居中；
证明内容：中心；
}
文章{
最高高度：30%；
溢出：滚动；
弹性：0.50vw；
位置：相对位置；
}
.马克{
位置：绝对位置；
最高：50%；
左：50%；
}

我正在尝试在媒体中构建类似于突出显示功能的内容。

问题是，在单击事件中，我需要添加一个元素，该元素将位于父元素的绝对位置，而不是主体，因为父元素是溢出：滚动

我怎样才能找到那些x和y条件？

我正在尝试在媒体中构建类似于突出显示功能的内容。

问题是，在单击事件中，我需要添加一个元素，该元素将位于父元素的绝对位置，而不是主体，因为父元素是溢出：滚动

我怎样才能找到那些x和y条件？

我正在尝试在媒体中构建类似于突出显示功能的内容。

问题是，在单击事件中，我需要添加一个元素，该元素将位于父元素的绝对位置，而不是主体，因为父元素是溢出：滚动

我怎样才能找到那些x和y条件？

看看这里的代码，你可以点击得到位置，我想你可以把这个x和y值分配给你的左上角变量


函数printMousePos（事件）{
document.body.textContent=
“clientX:+event.clientX+
“-clientY:”+event.clientY；
}
文件。添加的文件列表（“单击”，打印鼠标）好问题，我必须回到javascript基础。幸运的是，我找到了钥匙——有
offsetTop，offsetLeft
属性

在这个脚本中，在mousedown上，我们得到事件单击位置，然后减去article元素的偏移位置

偏移位置是指目标元素距文档起点的距离

编辑：为了处理文章中的垂直滚动位置，我在计算中添加了
article.scrollTop

运行下面的演示


const article=document.querySelector（`article`）；
var x；
变量y；
article.addEventListener（'mousedown'，function（）{
x=event.clientX；
y=event.clientY；
y=y-article.offsetTop+article.scrollTop-5.5；
x=x-article.offsetLeft+1；
})
article.addEventListener（'mouseup'，function（）{
var result=window.getSelection（）.toString（）；
constoldmark=document.querySelector（`.mark`）；
const body=document.querySelector（`body`）；
如果（旧马克）{
第条：removeChild（oldMark）；
}
window.getSelection（）.empty（）
如果（结果）{
让mark=document.createElement（'mark'）；
mark.innerText=`${result}`；
mark.classList.add（'mark'）；
mark.setAttribute（“style”，`top:${y}px；left:${x}px；`）；
第三条儿童（标志）；
}
});
main{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
对齐项目：居中；
证明内容：中心；
}
文章{
最大高度：50%；
溢出：滚动；
弹性：0.50vw；
位置：相对位置；
}
.马克{
位置：绝对位置；
最高：50%；
左：50%；
}

我正在尝试在媒体中构建类似于突出显示功能的内容。
问题是，在单击事件中，我需要向其父级添加一个元素，该元素将位于绝对位置，而不是主体，因为父级溢出：滚动

我怎样才能找到那些x和y条件？

我正在尝试在媒体中构建类似于突出显示功能的内容。

问题是，在单击事件中，我需要添加一个元素，该元素将位于父元素的绝对位置，而不是主体，因为父元素是溢出：滚动

我怎样才能找到那些x和y条件？

我正在尝试在媒体中构建类似于突出显示功能的内容。

问题是，在单击事件中，我需要添加一个元素，该元素将位于父元素的绝对位置，而不是主体，因为父元素是溢出：滚动

我怎样才能找到那些x和y条件？

这种方法的问题在于，它只显示相对于主体的位置，而不是相对于元素的位置。因此，使用内部滚动，元素将不在适当位置。您可能需要从文章中删除
position:relative
，或者在标记上使用
position:fixed
。@nemo查看我修改的答案，需要offsetTop和ScrollTop的组合将问题编辑得更精确。它已经有一个