引导元素（例如卡片）与动画SVG重叠，而不是在它们下面，从而扩展页面

我还在学习基础知识

我正在Bootstrap4中构建一个页面。标题导航正常，接下来是一个动画SVG文件，接下来是一个淡入的H1文本（通过animate.css）

继SVG和H1之后，我想要3张卡，但是当我编码它们时，它们只是重叠在SVG上

我如何修改代码，使这些卡遵循svg和h1，而不是重叠

我自己也尝试过在卡片中编写这两种代码，然后尝试从codepen复制一些模板代码，但都不起作用

我已经附上了我的密码笔，我已经注释掉了卡片部分，如果你取消注释，你就会明白我的意思

HTML代码：

辛巴理发店








理发学院

CSS代码：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: poppins;
    background: linear-gradient(228deg, #3f3f3f, #6d6a72);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 7s ease infinite;
    -moz-animation: AnimationName 7s ease infinite;
    animation: AnimationName 7s ease infinite;
}

.animated {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    margin-top: 35%;
    text-shadow: 0 0 32px white;
    color: white;
}




@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


#logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fill 3s ease forwards 4.5s;
}


#logo path:nth-child(1){
    stroke-dasharray:786.734;
    stroke-dashoffset:786.734;
    animation: line-anim 4s ease forwards;
}
#logo path:nth-child(2){
    stroke-dasharray:362.307;
    stroke-dashoffset:362.307;
    animation: line-anim 4s ease forwards 0.3s;
}
#logo path:nth-child(3){
    stroke-dasharray:1204.95;
    stroke-dashoffset:1204.95;
    animation: line-anim 4s ease forwards 0.6s;
}
#logo path:nth-child(4){
    stroke-dasharray:972.413;
    stroke-dashoffset:972.413;
    animation: line-anim 4s ease forwards 0.9s;
}
#logo path:nth-child(5){
    stroke-dasharray:781.918;
    stroke-dashoffset:781.918;
    animation: line-anim 4s ease forwards 1.2s;
}


@keyframes line-anim {
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes fill{
    from {
        fill: transparent;
    }
    to{
        fill: white;
    }
}

---

这和你要找的差不多吗？

我在上修改了CSS。动画如下

.animated {
/*  position: absolute;
    left: 50%;
    transform: translate(-50%); */
    position:relative;
    text-align:center;
    margin-top: 35%;
    text-shadow: 0 0 32px white;
    color: white;
}

---

J-Walw，FWW，这里有一个很好的解释显示：绝对和显示之间的区别：相对-绝对定位确实会使你的生活复杂化，当你在页面上考虑其他元素时，相对定位通常比较容易。祝你的CSS工作好运！嘿，大卫，我想我的回答已经保存在这里了，但是没有。对不起，我似乎忘恩负义，但你的回答很完美！非常感谢您关注@JHands，我很高兴这对您有所帮助。我希望你的编码进展顺利。