我的 z 索引出了什么问题？为什么当我滚动时导航栏出现在其他元素下方？

问题描述 投票：0回答：1

由于某种原因，导航栏显示在其他内容下方，我不确定我在哪里搞砸了......
这适用于具有相同导航栏的所有其他页面。滚动时其他内容会与导航栏重叠。我无法查看 .resources 上的下拉菜单。我真的找不到问题出在哪里，因为相同的导航栏在其他网站上也有效。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-wi
    dth, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
        rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
        rel="stylesheet">

    <title>Meraki</title>
</head>

<body>
    <header>
        <nav>
            <div class="main-nav" id="navbar">
                <img src="images/logo.png" alt="Logo">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="index.html" class="nav-opts">HOME</a></li>

                    <li class="nav-item"><a href="#about" class="nav-opts">ABOUT</a></li>

                    <li class="nav-item"><a href="#contact" class="nav-opts">CONTACT</a></li>

                    <li class="nav-item">
                        <a href="#resources" class="nav-opts">RESOURCES ▾</a>
                        <ul class="dropdown">
                            <li class="drop-item"><a href="">Events</a></li>
                            <li class="drop-item"><a href="">Gallery</a></li>
                            <li class="drop-item"><a href="">Newsletter</a></li>
                            <li class="drop-item"><a href="blog.html">Blog</a></li>
                        </ul>
                    </li>

                    <li class="nav-item"></li>
                </ul>
                <ul class="cta-nav">
                    <li class="cta-item"><a href="#join" class="cta-opts">JOIN</a></li>

                    <li class="cta-item"><a href="#donate" class="cta-opts">DONATE</a></li>

                    <li class="cta-item"><a href="#partner" class="cta-opts">PARTNER</a></li>

                    <li class="cta-item"></li>
                </ul>
            </div>
        </nav>
    </header>
    <main>
        <div class="container">
            <div class="hero">
                <img class="hero-bg" src="images/hero-bg.png" alt="Bg">
                <div class="hero-content">
                    <img class="hero-title" src="images/hero-title.png" alt="Meraki">
                    <a href="#">Join Us</a>
                </div>
            </div>
            <div class="about">
                <img class="line" src="images/line.png" alt="">
                <h2>About Us</h2>
                <p> <span class="hg">Meraki</span> is an organization that aims to improve education by promoting the
                    importance of arts in academics
                    for
                    a more wholesome learning. We do this by teaching students different arts.</p>
                <img class="stats" src="images/stats.png" alt="">

                <div class="info">
                    <div class="vision">
                        <h3>Our Vision</h3>
                        <p>Meraki wants to see students from all different age groups and backgrounds discover their own
                            talents, passions and hobbies. <span class="hg">Every student should have the opportunity to
                                learn whatever
                                subject they wish to.</span></p>
                    </div>
                    <div class="teach">
                        <h3>What Do We Teach?</h3>
                        <p>Meraki empowers students through the arts, offering vibrant lessons <span class="hg">in
                                music, dance, and art.</span> Our
                            goal is to cultivate a love for creativity, providing a space where each student can
                            discover
                            and express their unique artistic flair.</p>
                    </div>
                </div>

                <div class="partners">
                    <h2>Our Partners</h2>
                    <img class="partners-img" src="images/partners.png" alt="Partners">
                </div>
            </div>
        </div>
    </main>
    <script>
        var prevScrollpos = window.pageYOffset;
        window.onscroll = function () {
            var currentScrollPos = window.pageYOffset;
            var navbar = document.getElementById("navbar");

            if (prevScrollpos > 200) {
                navbar.classList.add("main-nav-scroll");
            } else {
                navbar.classList.remove("main-nav-scroll");
            }

            prevScrollpos = currentScrollPos;
        }

    </script>
</body>

</html>

CSS：

    scroll-behavior: smooth;
    height: 100%;
}



body {
    overflow-x: hidden;
    position: relative;
    display: flex;
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
    height: 100%;
}

a {
    text-decoration: none;
    margin: 0;
}
ul {
    padding: 0;
    margin: 0;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Bebas Neue', sans-serif;
    height: max-content;
    position: sticky;

}

.navbar-nav {
    display: flex;
    list-style: none;
    height: max-content;
    width: max-content;
    padding: 0;
}

.cta-nav {
    position: absolute;
    right: 0;
    display: flex;
    list-style: none;
    height: max-content;
    width: max-content;
    padding: 0;
    margin-right: 2em;
}

.cta-item:first-child {
    padding-left: 1.5rem;
}

.cta-item {
    background-color: #557571;
    margin-top: 1em;
    scroll-behavior: smooth;
}

.cta-item:not(:last-child) {
    padding-right: 1.5rem;
}

.cta-opts {
    padding: 6px 0;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    font-size: 1.6rem;
    transition: all 0.5s ease-in-out;
    position: relative;
    color: white;
}


.main-nav {
    transition: all 0.5s;
    position: fixed;
    margin: auto;
    height: 100px;
    margin-top: 10vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}

.main-nav-scroll {
    transition: all 0.5s;
    opacity: 0;
}

.main-nav-scroll:hover {
    opacity: 1;
    background-color: #EEEEEE;
}

.nav-item:first-child {
    padding-left: 3rem;
}

.nav-item:last-child {
    padding-right: 1rem;
}

.nav-item {
    margin-top: 1em;
    scroll-behavior: smooth;
}

.nav-item:not(:last-child) {
    padding-right: 1rem;
}

.nav-opts {
    position: fixed;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    font-size: 2rem;
    transition: all 0.5s ease-in-out;
    position: relative;
    color: #557571;
}

.nav-opts:hover {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: white;

    background: linear-gradient(90deg, #fff 0%, #fff 50%, #557571 50%, #557571 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
}

.drop-item {
    margin: 0;
    left: 0;
    text-align: left;
    display: block;
    width: 148px;
    font-size: 1.5rem;
    padding: 7.5px 0px;
    padding-left: 15px;
    background-color: #EEEEEE;
    margin-bottom: 3px;
}



.drop-item a {
    color: #D49A89;
}

.drop-item:hover {
    background-color: #557571;
}


.dropdown {
    width: 100%;
    position: fixed;
    display: none;
}

ul li:hover ul.dropdown {
    display: block;
}
ul li {
    position: relative; /* Ensure parent is positioned */
}
header {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

.main-nav img {
    margin-top: 12.5px;
    margin-left: 30px;
    position: absolute;
    left: 0;
    width: 110px;
}

.hero {
    height: 90vh;
    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.hero-bg {
    object-fit: cover;
    width: 100%;
    height: 600px;
    position: absolute;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.hero-title {
    width: 370px;
}

.hero a {
    display: inline-block;
    width: 80px;
    margin: auto;
    margin-top: 40px;
    padding: 7.5px 30px;
    background-color: #557571;
    color: white;
    text-decoration: none;
    font-size: 30px;
    font-family: 'Bebas Neue', sans-serif;
    transition: all 0.3s ease;
}

.hero a:hover {
    background-color: white;
    color: #557571;
}

.container {
    width: 100%;
}

.about {
    margin-top: 200px;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    font-family: "Libre Baskerville", serif;
    margin-bottom: 100px;
}

.about h2 {
    color: #394240;
    font-size: 2.75rem;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.about p {
    letter-spacing: -1px;
    color: #557571;
    margin: auto;
    width: 900px;
    font-size: 1.2rem;
    margin-bottom: 50px;
}

.hg {
    color: #D49A89;
}

.stats {
    margin: auto;
    display: flex;
    flex-direction: row;
    width: 75%;
}



.line {
    height: 70px;
    margin-bottom: 50px;
}

.vision {
    margin-top: 150px;
    text-align: left;
}

.vision h3 {
    margin-left: 225px;
    font-size: 1.5rem;
    color: #394240;
}

.vision p {
    font-size: 1.25rem;
    margin-left: 225px;
    width: 900px;
}

.teach {
    margin-top: 75px;
    text-align: right;
}

.teach h3 {
    margin-right: 225px;
    font-size: 1.5rem;
    color: #394240;
}

.teach p {
    font-size: 1.25rem;
    margin-right: 225px;
    width: 900px;
}

.partners {
    margin-top: 200px;
}

.partners h2 {
    margin-bottom: 40px;
}

.partners img {
    width: 85%;
}

我尝试将 main-nav 的 z-index 设置为 999，但仍然不起作用。我无法将其他内容的 z-index 设置为 -1，因为它们的悬停动画不起作用。

html css z-index
1个回答
0
投票

我在 Firefox 和 google 上尝试了你的代码，它工作正常。您使用什么浏览器？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.