Javascript 将一个元素固定到另一个元素

在项目中，我需要将

位置：绝对
元素（子元素）固定到另一个元素（父元素），因此如果父元素移动，我也应该更改子元素的位置

用户单击页面的某个位置（假设有一个
div
，里面有一个文本，比如博客文章或其他东西），然后我就可以在该点获取元素，或者将父元素的
x
和
y
位置保存到数据库中

当用户返回到同一页面时，我应该加载现有的pin并将其附加到父元素，但问题是在weblog或新闻门户中，元素通过添加或删除帖子而频繁更改

我的问题是如何将子元素固定到父元素，并检测正确的父元素以及父元素的更改？
如果父元素被定位为相对的，则处于绝对位置的子元素将引用该父元素。否则，它指的是最接近的父级位置，并通过定义指向浏览器窗口（html）

位置
可以是父项：
相对
、
绝对
或
固定
，以便子项引用此父项。如果触发，它对z-index规则也有直接影响。
实现这一点的简单方法是为所有parentElement提供一个唯一的id和一个公共类，假设它们是一篇文章的摘录，该类称为article。然后，您将为您的article类创建一个click处理程序，该处理程序将article id推送到浏览器本地存储中的一个数组中，并将您的childelement附加一个公共类，我们称之为favorite

在article类的CSS中，确保位置设置为相对，并且您最喜欢的类将其位置设置为绝对（使用适当的上/左/右/下值）

最后，为页面创建一个onload处理程序，该处理程序读取本地存储阵列，并将childelements附加到每个项目中，其中id存储在阵列中。
您可以使用CSS选择器将一个元素与另一个元素固定在一起：

.ele:before
.ele:after

e、 g:

请一次问一个问题，然后发布你的代码。@Ejay我什么都没试过，我正在寻找一个解决方案来实现它。首先尝试（很多），然后再问。我认为网站的期望是你已经尝试了一些不起作用的东西。然后发布示例代码。然后人们会尝试提供帮助。但为了给您指出正确的方向，我认为您需要查看jQuery以读取元素的
$（）.position（）
，然后您需要
$.ajax（）
将数据发送到服务器。当用户数据发送到客户端时，您可以使用
$（）.css（）
将内容移回正确的位置。
.ele:after {
  right: 100%;
  top: 30px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}