Bootstrap 元素（例如卡片）与我的动画 SVG 重叠，而不是在它们下面，扩展页面
Bootstrap elements (cards for example) are overlapping my animated SVG, rather than going beneath them, extending the page
我还在学习基础知识。
我正在 Bootstrap 4 中构建一个页面。header 导航很好，接下来是动画 SVG 文件，接下来是淡入的 H1 文本（通过 animate.css） .
从 SVG 和 H1 开始，我想要 3 张卡片，但是当我将它们编码时，它们只是与 SVG 重叠。
我如何修改代码，使卡片从 svg 和 h1 继续而不是重叠？
我自己都尝试过在卡片中编码，然后尝试从 codepen 复制一些模板代码，但都没有用。
我附上了我的codepen，我已经注释掉了卡片部分，如果你un-comment把它注释掉，你就会明白我的意思。
https://codepen.io/john-from-tamworth/pen/dyyZQpd
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simba Barbers</title>
<!--CSS Style Sheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="clippers 1.png" width="30" height="30" alt="logo">
Simba
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-2">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
<div class="section">
<div class="container">
<svg id="logo"
width="100%" height="auto" viewBox="0 0 669 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M58.174 167C47.6428 167 38.1801 165.16 29.7857 161.48C21.5439 157.646 15.0574 152.432 10.326 145.839C5.59463 139.092 3.15262 131.348 3 122.607H25.207C25.9701 130.121 29.0226 136.485 34.3645 141.698C39.859 146.759 47.7955 149.289 58.174 149.289C68.0946 149.289 75.8785 146.835 81.5256 141.928C87.3254 136.868 90.2252 130.428 90.2252 122.607C90.2252 116.474 88.5464 111.49 85.1886 107.656C81.8309 103.823 77.6337 100.909 72.597 98.9158C67.5604 96.9224 60.7686 94.7756 52.2216 92.4754C41.6905 89.7153 33.2198 86.9551 26.8095 84.1949C20.5519 81.4348 15.1337 77.1412 10.5549 71.3142C6.12881 65.3338 3.91575 57.36 3.91575 47.3927C3.91575 38.6522 6.12881 30.9084 10.5549 24.1613C14.9811 17.4142 21.1624 12.2006 29.0989 8.52033C37.188 4.84011 46.4218 3 56.8003 3C71.7576 3 83.9676 6.75689 93.4304 14.2707C103.046 21.7845 108.464 31.7517 109.685 44.1725H86.7912C86.028 38.0388 82.8229 32.6718 77.1758 28.0715C71.5287 23.3179 64.05 20.9411 54.7399 20.9411C46.0403 20.9411 38.9432 23.2412 33.4487 27.8415C27.9542 32.2885 25.207 38.5755 25.207 46.7027C25.207 52.5297 26.8095 57.2833 30.0146 60.9635C33.3724 64.6438 37.417 67.4806 42.1483 69.474C47.0323 71.3142 53.8242 73.461 62.5238 75.9144C73.0549 78.8279 81.5256 81.7415 87.9359 84.655C94.3461 87.4151 99.8406 91.7854 104.419 97.7658C108.998 103.593 111.288 111.567 111.288 121.687C111.288 129.508 109.227 136.868 105.106 143.769C100.985 150.669 94.8803 156.266 86.7912 160.56C78.702 164.853 69.163 167 58.174 167Z" stroke="white" stroke-width="5"/>
<path d="M162.779 5.07013V165.39H141.945V5.07013H162.779Z" stroke="white" stroke-width="5"/>
<path d="M360.144 6.2202V165.39H339.311V46.7027L286.655 165.39H272.004L219.119 46.4726V165.39H198.286V6.2202H220.721L279.33 137.788L337.938 6.2202H360.144Z" stroke="white" stroke-width="5"/>
<path d="M475.375 82.8149C481.175 83.7349 486.441 86.1117 491.172 89.9453C496.056 93.7789 499.872 98.5325 502.619 104.206C505.519 109.88 506.969 115.937 506.969 122.377C506.969 130.504 504.908 137.865 500.787 144.459C496.666 150.899 490.638 156.036 482.701 159.87C474.917 163.55 465.684 165.39 455 165.39H395.476V5.07013H452.71C463.547 5.07013 472.781 6.91024 480.412 10.5905C488.043 14.1173 493.767 18.9476 497.582 25.0814C501.398 31.2151 503.306 38.1155 503.306 45.7826C503.306 55.2898 500.711 63.187 495.522 69.474C490.485 75.6078 483.77 80.0547 475.375 82.8149ZM416.309 74.3043H451.337C461.105 74.3043 468.66 72.0042 474.002 67.4039C479.344 62.8036 482.014 56.4399 482.014 48.3128C482.014 40.1856 479.344 33.8219 474.002 29.2216C468.66 24.6213 460.952 22.3212 450.879 22.3212H416.309V74.3043ZM453.168 148.139C463.547 148.139 471.636 145.685 477.436 140.778C483.235 135.871 486.135 129.048 486.135 120.307C486.135 111.413 483.083 104.436 476.978 99.3759C470.873 94.1622 462.707 91.5554 452.481 91.5554H416.309V148.139H453.168Z" stroke="white" stroke-width="5"/>
<path d="M630.201 129.738H560.604L547.784 165.39H525.806L583.498 5.99018H607.537L665 165.39H643.022L630.201 129.738ZM624.249 112.717L595.403 31.7518L566.557 112.717H624.249Z" stroke="white" stroke-width="5"/>
</svg>
</div>
</div>
<h1 class="animated fadeIn delay-5s">BARBERING ACADEMY</h1>
<!-- <div class="container-fluid">
<div class="row">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</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;
}
}
这是否接近您要查找的内容？
https://codepen.io/panchroma/pen/wvvpjQo
我将 .animated 上的 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;
}
我还在学习基础知识。
我正在 Bootstrap 4 中构建一个页面。header 导航很好，接下来是动画 SVG 文件，接下来是淡入的 H1 文本（通过 animate.css） .
从 SVG 和 H1 开始，我想要 3 张卡片，但是当我将它们编码时，它们只是与 SVG 重叠。
我如何修改代码，使卡片从 svg 和 h1 继续而不是重叠？
我自己都尝试过在卡片中编码，然后尝试从 codepen 复制一些模板代码，但都没有用。
我附上了我的codepen，我已经注释掉了卡片部分，如果你un-comment把它注释掉，你就会明白我的意思。
https://codepen.io/john-from-tamworth/pen/dyyZQpd
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simba Barbers</title>
<!--CSS Style Sheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="clippers 1.png" width="30" height="30" alt="logo">
Simba
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-2">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
<div class="section">
<div class="container">
<svg id="logo"
width="100%" height="auto" viewBox="0 0 669 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M58.174 167C47.6428 167 38.1801 165.16 29.7857 161.48C21.5439 157.646 15.0574 152.432 10.326 145.839C5.59463 139.092 3.15262 131.348 3 122.607H25.207C25.9701 130.121 29.0226 136.485 34.3645 141.698C39.859 146.759 47.7955 149.289 58.174 149.289C68.0946 149.289 75.8785 146.835 81.5256 141.928C87.3254 136.868 90.2252 130.428 90.2252 122.607C90.2252 116.474 88.5464 111.49 85.1886 107.656C81.8309 103.823 77.6337 100.909 72.597 98.9158C67.5604 96.9224 60.7686 94.7756 52.2216 92.4754C41.6905 89.7153 33.2198 86.9551 26.8095 84.1949C20.5519 81.4348 15.1337 77.1412 10.5549 71.3142C6.12881 65.3338 3.91575 57.36 3.91575 47.3927C3.91575 38.6522 6.12881 30.9084 10.5549 24.1613C14.9811 17.4142 21.1624 12.2006 29.0989 8.52033C37.188 4.84011 46.4218 3 56.8003 3C71.7576 3 83.9676 6.75689 93.4304 14.2707C103.046 21.7845 108.464 31.7517 109.685 44.1725H86.7912C86.028 38.0388 82.8229 32.6718 77.1758 28.0715C71.5287 23.3179 64.05 20.9411 54.7399 20.9411C46.0403 20.9411 38.9432 23.2412 33.4487 27.8415C27.9542 32.2885 25.207 38.5755 25.207 46.7027C25.207 52.5297 26.8095 57.2833 30.0146 60.9635C33.3724 64.6438 37.417 67.4806 42.1483 69.474C47.0323 71.3142 53.8242 73.461 62.5238 75.9144C73.0549 78.8279 81.5256 81.7415 87.9359 84.655C94.3461 87.4151 99.8406 91.7854 104.419 97.7658C108.998 103.593 111.288 111.567 111.288 121.687C111.288 129.508 109.227 136.868 105.106 143.769C100.985 150.669 94.8803 156.266 86.7912 160.56C78.702 164.853 69.163 167 58.174 167Z" stroke="white" stroke-width="5"/>
<path d="M162.779 5.07013V165.39H141.945V5.07013H162.779Z" stroke="white" stroke-width="5"/>
<path d="M360.144 6.2202V165.39H339.311V46.7027L286.655 165.39H272.004L219.119 46.4726V165.39H198.286V6.2202H220.721L279.33 137.788L337.938 6.2202H360.144Z" stroke="white" stroke-width="5"/>
<path d="M475.375 82.8149C481.175 83.7349 486.441 86.1117 491.172 89.9453C496.056 93.7789 499.872 98.5325 502.619 104.206C505.519 109.88 506.969 115.937 506.969 122.377C506.969 130.504 504.908 137.865 500.787 144.459C496.666 150.899 490.638 156.036 482.701 159.87C474.917 163.55 465.684 165.39 455 165.39H395.476V5.07013H452.71C463.547 5.07013 472.781 6.91024 480.412 10.5905C488.043 14.1173 493.767 18.9476 497.582 25.0814C501.398 31.2151 503.306 38.1155 503.306 45.7826C503.306 55.2898 500.711 63.187 495.522 69.474C490.485 75.6078 483.77 80.0547 475.375 82.8149ZM416.309 74.3043H451.337C461.105 74.3043 468.66 72.0042 474.002 67.4039C479.344 62.8036 482.014 56.4399 482.014 48.3128C482.014 40.1856 479.344 33.8219 474.002 29.2216C468.66 24.6213 460.952 22.3212 450.879 22.3212H416.309V74.3043ZM453.168 148.139C463.547 148.139 471.636 145.685 477.436 140.778C483.235 135.871 486.135 129.048 486.135 120.307C486.135 111.413 483.083 104.436 476.978 99.3759C470.873 94.1622 462.707 91.5554 452.481 91.5554H416.309V148.139H453.168Z" stroke="white" stroke-width="5"/>
<path d="M630.201 129.738H560.604L547.784 165.39H525.806L583.498 5.99018H607.537L665 165.39H643.022L630.201 129.738ZM624.249 112.717L595.403 31.7518L566.557 112.717H624.249Z" stroke="white" stroke-width="5"/>
</svg>
</div>
</div>
<h1 class="animated fadeIn delay-5s">BARBERING ACADEMY</h1>
<!-- <div class="container-fluid">
<div class="row">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="//placehold.it/720x350" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</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;
}
}
这是否接近您要查找的内容？ https://codepen.io/panchroma/pen/wvvpjQo
我将 .animated 上的 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;
}