将元素固定到另一个元素

Question

在一个项目中，我需要将一个position: absolute元素（子元素）固定到另一个元素（父元素），所以如果父元素移动，我也应该改变子元素的位置。

用户点击页面的某个位置（假设div内有文字，如博客文章或其他内容），然后我可以在此时获取元素或保存{{1} }和x父元素在数据库中的位置。

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

我的问题是如何将子元素固定到父元素，还检测正确的父元素和父元素的更改？

Answer 1

如果父级被定位为relative，则absolute位置的子级将引用该父级。否则它指的是最近的父位置，并通过defaut到浏览器的窗口（html）。

Position可以用于父级：relative，absolute或fixed，以便让子级引用此父级。如果触发，它对z-index规则也有直接影响。

Answer 2

实现这一目标的一个非常简单的方法是给你所有的parentelements一个唯一的id和一个普通的类，让我们说它们是一篇文章的摘录，这个类叫做文章。然后，您将为您的文章类创建一个单击处理程序，将文章ID推送到浏览器本地存储中的数组中，并将您的childelement附加到一个公共类，我们将调用该收藏夹。

在文章类的CSS中，确保将位置设置为相对，并且您最喜欢的类将其位置设置为绝对（无论顶部/左/右/底部值是否合适）。

最后，为读取本地存储阵列的页面创建一个onload处理程序，并将childelements附加到每个存储在数组中的id的文章中。

Answer 3

您可以使用CSS选择器将元素与另一个元素相关联：

.ele:before
.ele:after

e.g：

.ele:after {
  right: 100%;
  top: 30px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}