Javascript 将子元素绝对定位到页面，即使移动绝对定位的父元素

我将容器定位到页面的绝对位置。在这个容器中，还有一个跨度，我需要将其定位到页面的绝对位置，因为如果它在移动后溢出父容器，我想将其隐藏

应该是这样的

我只能隐藏跨度，如果它是子级并且父级已隐藏其溢出。但我不能把两者都放在绝对位置

我当前的代码如下所示：

.container{
溢出：隐藏；
位置：绝对位置；
宽度：150px；
高度：50px；
背景色：黑色；
动画：移动2秒轻松进出交替无限；
}
.货柜跨度{
位置：绝对位置；
左：20px；
顶部：20px；
颜色：白色；
字体大小：16px；
}
@关键帧移动{
0% {
排名：0；
}
100% {
顶部：200px；
}
}

正文

.container{
溢出：隐藏；
位置：绝对位置；
宽度：150px；
高度：50px；
背景色：黑色；
动画：移动2秒轻松进出交替无限；
}
.货柜跨度{
位置：绝对位置；
左：20px；
顶部：20px；
颜色：白色；
字体大小：16px；
动画：move2 2 2缓进缓出交替无限；
}
@关键帧移动{
0% {
排名：0；
}
100% {
顶部：200px；
}
}
@关键帧移动2{
0% {
排名：0；
}
100% {
顶部：-200px；
}
}

正文

.container{
溢出：隐藏；
位置：绝对位置；
宽度：150px；
高度：50px；
背景色：黑色；
动画：移动2秒轻松进出交替无限；
}
.货柜跨度{
位置：绝对位置；
左：20px；
顶部：20px；
颜色：白色；
字体大小：16px；
动画：move2 2 2缓进缓出交替无限；
}
@关键帧移动{
0% {
排名：0；
}
100% {
顶部：200px；
}
}
@关键帧移动2{
0% {
排名：0；
}
100% {
顶部：-200px；
}
}

正文
< /代码> 使用<代码>位置：用孩子固定< <代码> >考虑<代码>剪辑路径< /代码>，而不是溢出来隐藏溢出：


.container{
剪辑路径：多边形（0 0100%0100%100%，0 100%）；
位置：绝对位置；
宽度：150px；
高度：50px；
背景色：黑色；
动画：移动2秒轻松进出交替无限；
}
.货柜跨度{
位置：固定；
左：20px；
顶部：20px；
颜色：白色；
字体大小：16px；
}
@关键帧移动{
0% {
排名：0；
}
100% {
顶部：200px；
}
}
身体{
背景：蓝色；
}

正文
< /代码> 使用<代码>位置：用孩子固定< <代码> >考虑<代码>剪辑路径< /代码>，而不是溢出来隐藏溢出：


.container{
剪辑路径：多边形（0 0100%0100%100%，0 100%）；
位置：绝对位置；
宽度：150px；
高度：50px；
背景色：黑色；
动画：移动2秒轻松进出交替无限；
}
.货柜跨度{
位置：固定；
左：20px；
顶部：20px；
颜色：白色；
字体大小：16px；
}
@关键帧移动{
0% {
排名：0；
}
100% {
顶部：200px；
}
}
身体{
背景：蓝色；
}

正文