Div not going on top of fixed svg CSS-CodePudding

I have this SVG located under nav and similar one on bottom of the view in different color. I have the top one fixed so when I scroll the bottom one goes on top of the top one. That I get to work but for some reason my next section doesn't want to go over the svg. I hope some CSS guru can help me out with this. Basically I want to hide the top svg under the section-2.

        * {
        margin: 0;
        padding: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: rgb(44, 170, 243);
        width: 100%;
        height: 3em;
    }
    
    .section-1 .navsvg {
        position: fixed;
        top: -15%;
        width: 1920px;
        z-index: 1;
    }
    
    .section-1 {
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        background-color: rgba(255, 255, 255, 0.116);
        z-index: 0;
    }
    
    .section-1 svg {
        position: absolute;
        bottom: -80px;
        z-index: 3;
        height: 60%;
        width: 1920px;
    }
    .section-1 svg path {
        height: 100%;
        z-index: 3;
    }
    
    .svgbottomcover {
        background-color: #4c4e3f;
        content: '';
        height: 100px;
        width: 100%;
        z-index: 5;
    }
    
    h1 {
        background-image: url(./assets/pexels-tom-fisk-3174348.jpg);
        background-repeat: repeat;
        background-size: 90%;
        -webkit-background-clip: text;
        background-blend-mode: darken;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: 'Sora', sans-serif;
        letter-spacing: 0.75rem;
        filter: drop-shadow(0 0 0.25rem rgb(0, 0, 0));
    }
    #heroVideo {
        position: fixed;
        z-index: -1;
        min-width: 100%;
        min-height: 100%;
    }
    
    .section-2 {
        height: 100vh;
        background-color: #4c4e3f;
        z-index: 5;
    }
    .section-3 {
        height: 100vh;
        background-color: #ffffff;
        z-index: 5;
    }

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Clean the Ocean</title>
            <link rel="stylesheet" href="style.css" />
            <link rel="preconnect" href="https://fonts.googleapis.com" />
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
            <link
                href="https://fonts.googleapis.com/css2?family=Sora:wght@300;500&display=swap"
                rel="stylesheet"
            />
        </head>
        <body>
            <nav>
                <a href="#">Home</a>
                <a href="#">Our Mission</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
            </nav>
    
            <div >
                <svg
                    
                    xmlns="http://www.w3.org/2000/svg"
                    viewbox="0 0 1440 320"
                >
                    <path
                        fill="#ffffff"
                        fill-opacity="1"
                        d="M0,128L48,138.7C96,149,192,171,288,160C384,149,480,107,576,117.3C672,128,768,192,864,202.7C960,213,1056,171,1152,165.3C1248,160,1344,192,1392,208L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"
                    ></path>
                </svg>
                <video autoplay muted loop id="heroVideo">
                    <source src="./assets/herovideo.mp4" type="video/mp4" />
                </video>
                <h1>Clean the Ocean</h1>
                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1440 320">
                    <path
                        fill="#4c4e3f"
                        fill-opacity="1"
                        d="M0,96L48,117.3C96,139,192,181,288,192C384,203,480,181,576,181.3C672,181,768,203,864,213.3C960,224,1056,224,1152,213.3C1248,203,1344,181,1392,170.7L1440,160L1440,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 ></div>
            <div ></div>
            <div ></div>
            <script src="./app.js"></script>
        </body>
    </html>

1st image

CodePudding user response：

The second section needed to be position absolute to go on top of the fixed svg.