时间戳

首页 > 解决方案 > 为什么滚动时网站内容显示在导航栏上

html - 为什么滚动时网站内容显示在导航栏上

问题描述

滚动时网站的内容显示在导航栏上我不知道如何修复它 flksjfjsda lf jjsdfjkldj fkjhdsjk fjkdhfjk lkfjs lkdjflksa fkjhdfjk fd f jksdfhjksh fakjhjkds hjkh jksdjklhjkf hs 这是html：

<body>
    <header>
        <p class="logo">גכשד יחכי</p>  
        <nav>
            <ul class="nav_links">
                <li><a href="#">אודות</a></li>
                <li><a href="#">שירותים</a></li>
                <li><a href="#">פרוייקטים</a></li>
            </ul>
        </nav>
        <a class="cta" href="https://support.microsoft.com/he-il/contactus/"><button>צור קשר</button></a>
    </header>
    <div class="intro"></div>
    <main>
        <h1 class="main-text">פסיכולוגית<br /> חינוכית</h1>
        <p class="secendery-text">חשדג גשחכי היא פסיכולוגית חינוכית<br /> העוסקת במקצוע זה למעלה מ20 שנה <br /></p>
        <img src="images/psychology1.png" alt="" class="side-image" />
    </main>
    <div class="card">
        <img src="images/img_avatar.png" alt="Avatar" >
        <div class="container">
            <h4><b>b</b></h4>
            <p> </p>
        </div>
    </div>
</body>
</html>

这是指问题的CSS：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li, a, button {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    color: #edf0f1;
}


header {
    display: flex;
    background-color: #24252A;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    position: fixed;
    top: 0;
    width: 100%;
}



.nav_links {
    list-style: none;
    display: flex;
}
nav{
    order:2;
}

.cta{
    order:1;
}
.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
    transition: all 0.3s ease 0s;
}

.nav_links li a:hover {
    color:#ddad34;
}




.main-text {
    font-family: 'Rubik', sans-serif;
    margin: 0;
    padding: 0;
    position:absolute;
    top: 32%;
    right: 25%;
    direction: rtl;
    font-size: 60px;
    color: black;
}

.secendery-text {
    font-family: 'Rubik', sans-serif;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 48%;
    right: 25%;
    direction: rtl;
    color: darkgray;
}

.side-image {
    position: absolute;
    top: 20%;
    left: 5%;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

.

如果有人知道我该如何解决这个问题，请帮助谢谢

标签： htmlcss

解决方案

在您的情况下，您应该z-index为 header 元素添加一个属性。默认情况下，如果z-index未指定元素，它将按声明顺序对元素进行分层（最后一个 html 元素position: absolute/fixed将溢出之前的元素position: absolute/fixed）。header { z-index: 100;} 尝试为css 文件中的标头指定 z-index 属性 。

下次，请尝试提供更具体的问题概述，而不是胡言乱语。

推荐阅读