两个部分彼此重叠

Question

着陆页和创始人部分位于彼此之上。当我尝试添加创始人部分时，它只是搞砸了，这是您可以直接在那里查看的 codepen URL。 https://codepen.io/anon/pen/BeMyRx我试图做position:absolute;，top:1500px;但什么也没发生*{    margin: 0;    padding: 0;  }body,html{    font-family: sans-serif;    width: 100%;    height:100%;flex-wrap:wrap;position: center;background-image:url(https://cdn.discordapp.com/attachments/508013798544769034/583722034157060096/Untitled-1.png);background-repeat: no-repeat;background-size: cover;}.section-top{    width: 100%;    height: 100%;    overflow: hidden;    position: relative;    box-sizing: border-box;}.content{    position: absolute;    top:50%;    left:50%;    transform: translate(-50% , -50%);    text-align: center;}.content h1{    color:#c0392b;    text-transform: uppercase;}.content h3{    color:white;    font-size:15px;    font-family: Arial;}.content a{    background:#e74c3c;    padding: 10px 24px;    color: white;    text-decoration: none;    font-size:18px;    border-radius:20px;    text-transform: uppercase;}.testimonial-section{    background: #3498db;    padding: 40px 0;  }  .inner-width{    max-width: 1200px;    margin: auto;    padding: 0 20px;  }  .testimonial-section h1{    text-align: center;    color: #333;    font-size: 24px;  }  .border{    width: 100px;    height: 3px;    background: #333;    margin: 40px auto;  }  .testimonial{    background: #f1f1f1;    padding: 40px;    overflow: hidden;    border-radius: 8px;    cursor: pointer;  }  .test-info{    display: flex;    height: 60px;    align-items: center;  }  .test-pic{    width: 50px !important;    border-radius: 50%;    margin-right: 15px;  }  .test-name{    font-size: 12px;    color: #333;  }  .test-name span{    display: block;    font-size: 14px;    font-weight: 700;    color: #3498db;  }  .testimonial p{    font-size: 12px;    line-height: 22px;    margin-top: 20px;  }着陆页应该在网站的顶部，然后创始人部分应该在下一个。

Answer 1

在 HTML 代码中，您在类属性中编写了“secton-top”而不是“section-top”。