Html 将一个绝对四舍五入div置于另一个绝对位置div上方

我正在尝试使用Css动画来创建位置类型动画，其中位置div在line div上标记的兴趣点上进行动画。我的第一个兴趣点是line div的中心。但是，下面的代码似乎并不是我想要的

  top: 116px;
  left: 50%;
  transform: translate(-50%, -50%);

.地点{ 位置：绝对位置； 顶部：116px； 左：50%； 转化：转化-50%，-50%； 宽度：120px； 高度：120px； 边界半径：50%； 边框：16px实心F3； 边框顶部：16px实心3498db； 边框底部：16px实心3498db； 动画：位置4s线性无限； } @关键帧位置{ 0% { 变换：旋转0度； } 100% { 变换：旋转360度； } } .线路{ 位置：绝对位置； 顶部：100px； 左：50%； 转化：translateX-50%； 边框：8px实心F3； 宽度：500px； }

---

像这样的？您还应该向动画添加一个translate-50%，-50%。否则，它将删除上的translate-50%，-50%，并将其覆盖

.地点{ 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； 宽度：120px； 高度：120px； 边界半径：50%； 边框：16px实心F3； 边框顶部：16px实心3498db； 边框底部：16px实心3498db； 动画：位置4s线性无限； } @关键帧位置{ 0% { 变换：平移-50%，旋转-50%； } 100% { 变换：平移-50%，-50%旋转360度； } } .线路{ 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； 边框：8px实心F3； 宽度：500px； }

---

旋转覆盖了中心的平移，当我看到Dogukan Cavus的回答时，我意识到了这一点。你如何发现所有这些类似的问题？我甚至不想搜索任何接近标题的东西。这就是为什么我们有重复的结尾；关闭类似问题，以便以后搜索。有人可能会发现你的问题，然后会看到另一个问题。为什么不把他们放在同一个分区中，绝对定位那个家长？如果他们在同一个分区中，我是否还需要至少定位其中一个以便重叠？谢谢你指出：