Html CSS绝对位置，而不是相对于其绝对父div

有一个父div具有绝对定位，而子div具有绝对定位。 我的问题是使子div相对于整个页面而不是相对于其父页面：

例如：

.parent{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：100px；
高度：100px；
背景颜色：蓝色；
溢出：隐藏；
动画：无限移动；
}
.儿童{
位置：固定；
顶部：5px；
左：5px；
宽度：50px；
高度：50px；
背景颜色：紫色；
z指数：2；
}
@关键帧移动{
50% {
转换：translateX（25px）；
}
}

---

绝对定位的行为类似于子div的相对定位

必须将子div移到父div之外，使其相对于页面/正文固定

---

否则，

子元素

将始终相对于父元素定位

您可以对子元素使用相反方向的动画，这将使子元素在一个位置看起来像它的静态元素

.parent{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：100px；
高度：100px；
背景颜色：蓝色；
溢出：隐藏；
动画：无限移动；
}
.孩子{
位置：绝对位置；
顶部：5px；
左：5px；
宽度：50px；
高度：50px；
背景颜色：紫色；
动画：向后移动2s无限；
z指数：2；
}
@关键帧移动{
50% {
转换：translateX（25px）；
}
}
@关键帧向后移动{
50% {
转换：translateX（-25px）；
}
}

您孩子的位置必须是绝对的。绝对定位与页面本身有关。

可以考虑使用<代码>剪辑路径< /COD>动画< /P>的想法。

.parent{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：125px；
高度：100px；
背景颜色：蓝色；
溢出：隐藏；
动画：无限移动；
剪辑路径：多边形（0 0，计算（100%-25px）0，计算（100%-25px）100%，0 100%）；
}
.儿童{
位置：绝对位置；
顶部：5px；
左：5px；
宽度：50px；
高度：50px；
背景颜色：紫色；
}
@关键帧移动{
50% {
剪辑路径：多边形（25px 0，100%0100%100%，25px 100%）；
}
}

您可以使用此代码

正文{
保证金：0；
填充：0；
}
.parent{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：200px；
高度：200px；
背景颜色：蓝色；
溢出：隐藏；
动画：无限移动；
}
.儿童{
位置：固定；
顶部：0px；
左：0px；
宽度：100px；
高度：100px；
背景颜色：紫色；
z指数：2；
}
@关键帧移动{
50% {
转换：translateX（25px）；
}
}

那么元素应该是同级的。您需要在DOM中的其他位置放置“子对象”以使其正常工作。通过此操作，我无法使用

溢出：隐藏，并且div将不会隐藏可能的重复：与使用Transform@GarrGodfrey由此,，我不能使用
溢出：隐藏
并且div不会被隐藏
溢出：隐藏
？当蓝色div移动到紫色子对象之外时隐藏紫色子对象这应该标记为已解决，但不幸的是，这在我的项目中不起作用，因为对我的div应用了多个过渡效果，我会设法解决的孩子已经完全就位了。问题是父对象也是绝对定位的，这导致子对象的绝对位置被锚定到父对象而不是页面。是的，这是正确的。但你必须明白，我刚才说的是页面上的第一个脚本。也是有效的答案，但我通过将div设置为矩形使示例变得简单，但它的方式更复杂，不能在剪辑路径中绘制。@KareemDabbeet分享你真实而复杂的示例。实际上，我们只能根据您提供的代码提供帮助。没有人能给你一个准确的解决方案，因为没有人知道真正的用例