Css 如何使动画相对于父元素而不是身体移动？

我想在我的主页中使用css动画作为一个部分

body{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.flower-section{
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(#333, #000);
}

.set{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.set div{
    position: absolute;
    display: block;
}

.set div img{
    background-color: red;
    padding: 1rem;
}

.set div:nth-child(1){
    left: 5%;
    animation: animate 15s linear infinite;
    animation-delay: -7s;
}
.set div:nth-child(2){
    left: 15%;
    animation: animate 20s linear infinite;
    animation-delay: -5s;
}
.set div:nth-child(3){
    left: 25%;
    animation: animate 25s linear infinite;
}
.set div:nth-child(4){
    left: 35%;
    animation: animate 15s linear infinite;
}
.set div:nth-child(5){
    left: 50%;
    animation: animate 18s linear infinite;
    animation-delay: -10s;
}
.set div:nth-child(6){
    left: 65%;
    animation: animate 12s linear infinite;
    animation-delay: -8s;
}
.set div:nth-child(7){
    left: 75%;
    animation: animate 14s linear infinite;
}
.set div:nth-child(8){
    left: 85%;
    animation: animate 15s linear infinite;
    animation-delay: -7s;
}
.set div:nth-child(9){
    left: 95%;
    animation: animate 19s linear infinite;
}

@keyframes animate{
    0%{
        top: -10%;
        opacity: 0;
        transform: translateX(20px) rotate(0deg);
    }
    10%{
        opacity: 1;
    }
    20%{
        transform: translateX(-20px) rotate(45deg);
    }
    40%{
        transform: translateX(-20px) rotate(90deg);
    }
    60%{
        transform: translateX(20px) rotate(135deg);
    }
    80%{
        transform: translateX(-20px) rotate(180deg);
    }
    100%{
        top:110%;
        transform: translateX(-20px) rotate(225deg);
    }
}

.set2{
    transform: scale(1.5) rotateY(180deg);
    filter: blur(2px);
    z-index: 0;
}

.set3{
    transform: scale(0.8) rotateX(180deg);
    filter: blur(4px);
    z-index: 0;
}

.flower-title{
    position: absolute;
    top: 50%;
    transform: translateY(-50% );
    width: 100%;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 5em;
    font-family: sans-serif;
    z-index: 1;
}

但当我试图实现它时，它发生了

红色方块似乎相对于整个身体而不是父容器移动。我怎样才能解决这个问题？

---

我已经尝试过使父母和孩子的位置相对，但似乎没有起作用。

红色方块到处浮动的原因是您已将容器元素设置为

位置：相对但不要将任何方块设置为
位置：绝对。通过将正方形设置为绝对位置，您对其执行的所有操作现在都将相对于其容器

我所做的是将所有的
。将div:n个child（n）
设置为
位置：绝对。然后我去给了
main
一个白色的背景，这样红色的方块就会有东西落在后面。我也给了
nav
一个相对位置，这样我可以给它一个比红色方块更高的z指数，所以方块从nav后面开始，而不是前面

我还将容器的高度设置为600px的固定高度，相当于100%，因为以%为单位的高度是一个相对单位，因此生成的高度取决于父元素高度的高度

以下是我如何实现您所期望的结果：


正文{
保证金：0；
填充：0；
}
主要{
背景：白色；
}
导航{
位置：相对位置；
z指数：99；
}
.花卉组{
位置：相对位置；
高度：600px；
背景：径向梯度（#333，#000）；
/*溢出：隐藏*/
}
.设置{
位置：相对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
/*z指数：1*/
}
.set div{
位置：相对位置；
显示：块；
}
.set div img{
背景色：红色；
填充：1rem；
}
.设置分区：第n个子项（1）{
位置：绝对位置；
左：5%；
动画：动画15秒线性无限；
动画延迟：-7秒；
}
.设置分区：第n个子项（2）{
位置：绝对位置；
左：15%；
动画：动画20秒线性无限；
动画延迟：-5s；
}
.set div:n子项（3）{
位置：绝对位置；
左：25%；
动画：动画25秒线性无限；
}
.set div:n个子项（4）{
位置：绝对位置；
左：35%；
动画：动画15秒线性无限；
}
.设置分区：第n个子项（5）{
位置：绝对位置；
左：50%；
动画：动画18秒线性无限；
动画延迟：-10秒；
}
.set div:n个子项（6）{
位置：绝对位置；
左：65%；
动画：动画12秒线性无限；
动画延迟：-8s；
}
.set div:第n个子项（7）{
位置：绝对位置；
左：75%；
动画：动画14s线性无限；
}
.set div:第n个子项（8）{
位置：绝对位置；
左：85%；
动画：动画15秒线性无限；
动画延迟：-7秒；
}
.set div:第n个子项（9）{
位置：绝对位置；
左：95%；
动画：动画19秒线性无限；
}
@关键帧设置动画{
0%{
前-10%；
不透明度：0；
变换：translateX（20px）旋转（0度）；
}
10%{
不透明度：1；
}
20%{
变换：translateX（-20px）旋转（45度）；
}
40%{
变换：translateX（-20px）旋转（90度）；
}
60%{
变换：translateX（20px）旋转（135度）；
}
80%{
变换：translateX（-20px）旋转（180度）；
}
100%{
最高：110%；
变换：translateX（-20px）旋转（225度）；
}
}
.set2{
位置：绝对位置；
变换：比例（1.5）旋转（180度）；
过滤器：模糊（2px）；
/*z指数：0*/
}
.set3{
位置：绝对位置；
变换：缩放（0.8）旋转（180度）；
过滤器：模糊（4px）；
/*z指数：0*/
}
.花卉名称{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
宽度：100%；
文本对齐：居中；
颜色：#fff；
保证金：0；
填充：0；
字号：5em；
字体系列：无衬线；
/*z指数：1*/
}
谢谢您的帮助！