向下滚动时文本会干扰导航栏

Question

您好！我对网络开发还是个新手，我真的需要这方面的帮助。向下滚动时，文本出于某种原因干扰了我的导航栏，我尝试了我能想到的每个位置。我认为这与保证金有关，但我真的不知道。我为你们发布了代码来帮助我。感谢所有愿意提供帮助的人！

function navSlide() {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links li");
    
    burger.addEventListener("click", () => {
        //Toggle Nav
        nav.classList.toggle("nav-active");
        
        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ""
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;b
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
    });
    
}

navSlide();

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
.background{
    width: 100%;
    height: 100vh;
 background-image:
    linear-gradient(0deg, rgba(93,73,84,0.5), rgba(93,73,85,0.2)),
    url(/images/beachpic.jpeg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
.nav{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5D4954;
    font-family: "Poppins", sans-serif;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
    font-family: 'Poppins', sans-serif;;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5D4954;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 0;
    }
    
    .burger {
        display: block;
        cursor: pointer;
    }
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}
.logo{
    position: relative;
    height: 70px;
}
.link::after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fbfcfd;
    transition: width .3s;
}
.link:hover::after{
    width: 100%;
    transition: width .3s;
}
.header{
    width: 100%;
    background-color:rgba(0, 0, 0,0.5)
}
.header ul{
    text-align: center;
}
.header ul li{
    list-style: none;
    display: inline-block;
}
.header ul li a{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color:white;
    font-size: 100%;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 25px;
    transition: width .3s;
}
.content{
    color: #fbfcfd;
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 2;
}
.heading1{
    font-size: 70px;
    margin-bottom: 10px 0 30px;
    background:transparent;
    position: relative;
    animation: text 5s 1;
}
@keyframes text{
    0%{
        color: transparent;
        margin-bottom: -40px;
    }
    30%{
        letter-spacing: 4px;
        margin-bottom: -40px;
    }
    85%{
        letter-spacing: 3px%;
        margin-bottom: -40px;
    }
}

.welcome{
    font-size: 30px;
    position: relative;
}

 <head>
        <link rel="stylesheet" href="home.css">
    </head>
    <header class="site-header"></header>
    <div class="background">
        <div class="nav">
        <img src="/images/logo.png" alt="" class="logo">
        <ul class="nav-links">
            <li><a href="about.html"class="link">About</a></li>
            <li><a href="#"class="link">Work</a></li>
            <li><a href="#"class="link">Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </div>
    </nav>
    <p style="font-size: 1px;">قيل قديقال</p>
    <div class="content">
        <small class="welcome">Welcome to</small>
        <h1 class="heading1">H2O <br>Tech<br>Solutions</h1>

    </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    
    <p style="font-size: 1px;">قيل قديقال</p>
    <div class="container">
        <h1>About Us</h1>
        <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nisi placeat nihil labore, in quis dolor rem asperiores id ex, perspiciatis facilis tempora dolores rerum odit quidem ut, nesciunt quibusdam adipisci quod unde modi! Dolore incidunt libero ipsam ipsum doloribus.</p>
    </div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, exercitationem!</p>
    <script src="script.js"></script>

Answer 1

尝试为导航栏提供比内容更高的 z-index。

来自CSS-Tricks：

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default).

Answer 2

将z-index: 3;添加到.nav:

function navSlide() {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links li");
    
    burger.addEventListener("click", () => {
        //Toggle Nav
        nav.classList.toggle("nav-active");
        
        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ""
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;b
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
    });
    
}

navSlide();

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
.background{
    width: 100%;
    height: 100vh;
 background-image:
    linear-gradient(0deg, rgba(93,73,84,0.5), rgba(93,73,85,0.2)),
    url(/images/beachpic.jpeg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
.nav{
    position: fixed;
    z-index: 3;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5D4954;
    font-family: "Poppins", sans-serif;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
    font-family: 'Poppins', sans-serif;;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5D4954;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 0;
    }
    
    .burger {
        display: block;
        cursor: pointer;
    }
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}
.logo{
    position: relative;
    height: 70px;
}
.link::after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fbfcfd;
    transition: width .3s;
}
.link:hover::after{
    width: 100%;
    transition: width .3s;
}
.header{
    width: 100%;
    background-color:rgba(0, 0, 0,0.5)
}
.header ul{
    text-align: center;
}
.header ul li{
    list-style: none;
    display: inline-block;
}
.header ul li a{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color:white;
    font-size: 100%;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 25px;
    transition: width .3s;
}
.content{
    color: #fbfcfd;
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 2;
}
.heading1{
    font-size: 70px;
    margin-bottom: 10px 0 30px;
    background:transparent;
    position: relative;
    animation: text 5s 1;
}
@keyframes text{
    0%{
        color: transparent;
        margin-bottom: -40px;
    }
    30%{
        letter-spacing: 4px;
        margin-bottom: -40px;
    }
    85%{
        letter-spacing: 3px%;
        margin-bottom: -40px;
    }
}

.welcome{
    font-size: 30px;
    position: relative;
}

<head>
        <link rel="stylesheet" href="home.css">
    </head>
    <header class="site-header"></header>
    <div class="background">
        <div class="nav">
        <img src="/images/logo.png" alt="" class="logo">
        <ul class="nav-links">
            <li><a href="about.html"class="link">About</a></li>
            <li><a href="#"class="link">Work</a></li>
            <li><a href="#"class="link">Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </div>
    </nav>
    <p style="font-size: 1px;">قيل قديقال</p>
    <div class="content">
        <small class="welcome">Welcome to</small>
        <h1 class="heading1">H2O <br>Tech<br>Solutions</h1>

    </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    
    <p style="font-size: 1px;">قيل قديقال</p>
    <div class="container">
        <h1>About Us</h1>
        <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nisi placeat nihil labore, in quis dolor rem asperiores id ex, perspiciatis facilis tempora dolores rerum odit quidem ut, nesciunt quibusdam adipisci quod unde modi! Dolore incidunt libero ipsam ipsum doloribus.</p>
    </div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, exercitationem!</p>
    <script src="script.js"></script>

向下滚动时文本会干扰导航栏

Text interfering with the navbar when scrolling down

html

javascript

css

navbar