问Wave SVG定位:检查元素的结果与移动设备中的实际站点不同

EN

.header-container {
    background-color: white;
}

.header-container .inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.header-container .logo {
    z-index: 99;
}

.header-container .left {
    position: absolute;
    left: 0;
    top: 30%;
    z-index: 5;
}

.header-container .right {
    position: absolute;
    right: 0;
    top: 30%;
    z-index: 5;
}

@media (max-width: 960px) { 
    .header-container .left {
        display: none;
    }
    .header-container .right {
        display: none;
    }
}

@media (max-width: 767.98px) { 
    .header-container .logo {
        width: 300px;
        height: auto;
    }
}

/* Staffs */
.staffs-container {
    background-color: var(--dark);
}

.staffs-container .title {
    text-align: center;
    color: var(--red);
}

.title h1 {
    font-size: 64px;
    margin-bottom: 56px;
}

.staffs-container .cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background-color: var(--red);
    width: 80%;
    max-width: 1200px;
    border-radius: 60px;
    padding: 120px 0;
    filter: drop-shadow(0px 40px 20px rgba(0, 0, 0, 0.5));
}

@media (max-width: 920px) { 
    .staffs-container .cards {
        flex-direction: column;
    }
}

.staffs-container .card2 {
    margin: 10px 0;
    width: 210px;
    text-align: center;
}

.staffs-container img {
    margin-bottom: 20px;
}

.staffs-container h2 {
    font-size: 18px;
    font-weight: bold;
}

    <!-- Header -->
    <div class="header-container" id="header">
        <div class="inner">
            <img class="logo" src="images/logo.svg">

            <img class="left" src="images/vectorSet.svg">
            <img class="right" src="images/vectorSet.svg">
            <svg xmlns="http://www.w3.org/2000/svg" class="wave" viewBox="0 0 1440 320"><path fill="#142447" fill-opacity="1" d="M0,256L48,229.3C96,203,192,149,288,154.7C384,160,480,224,576,218.7C672,213,768,139,864,128C960,117,1056,171,1152,197.3C1248,224,1344,224,1392,224L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
        </div>
    </div>

    <!-- Meet our Staffs -->
    <div class="staffs-container" id="staffs">
        
        <div class="title">
            <h1>Meet our Staffs</h1>
        </div>
        <div class="cards">
            <div class="card2">
                <img src="images/face1.png">
            </div>
            <div class="card2">
                <img src="images/face1.png">
            </div>
            <div class="card2">
                <img src="images/face1.png">
            </div>
        </div>
    </div>