html - 导航确实在画廊 : How can i fix this? 下消失

Question

滚动时，我的导航会在我的图库下方消失。我没有为图片使用任何 z 高度，我不知道如何解决这个问题。

同样在引用部分， block 引用与导航重叠。

我尝试过使用 z-height 但它没有帮助 - 导航仍然在图片下消失。

我的整个代码不适合这里，所以请为整个 View 使用 jsfiddle:https://jsfiddle.net/joxm3tcu/1/

<header>
    <section class="navigation">
        <div class="nav-container">
            <div class="brand">
                <a href="#!">Logo</a>
            </div>
            <nav>
                <div class="nav-mobile">
                    <a id="nav-toggle" href="#!"><span></span></a>
                </div>
                <ul class="nav-list">
                    <li>
                        <a href="#!">MOVE</a>
                        <ul class="nav-dropdown">
                            <li>
                                <a href="#!">Home</a>
                            </li>
                            <li>
                                <a href="#!">Media</a>
                            </li>
                            <li>
                                <a href="#!">Open Space</a>
                            </li>
                            <li>
                                <a href="#!">Vacation</a>
                            </li>
                            <li>
                                <a href="#!">Events</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#!">Über uns</a>
                    </li>
                    <li>
                        <a href="#!">Aktuelles</a>
                    </li>
                    <li>
                        <a href="#!">Kontakt</a>
                    </li>
                </ul>
            </nav>
        </div>
    </section>
    <section class="hero">
        <div class="hero-inner">
            <h1>Ein neues Jugendhaus in Eimsbüttel – Das MOVE</h1>
            <h2>Neueröffnung am 15. Juni 2019</h2>
        </div>
    </section>
</header>
<main>
<section id="Zitat">
    <div id="Zitatbox" style="background:white;">
        <blockquote>
            <p style="color: black;">Die Ausstattung des MOVE ist unschlagbar und die Räumlichkeiten haben mich einfach umgehauen. Ich freue mich darauf, wenn sie von vielen jungen Menschen endlich mit Leben gefüllt werden. - Sven Becker, Medienpädagoge</p>
        </blockquote>
    </div>
</section>
    <section class="ug" style="height: 840px;">

        <ul class="uggalerie">
            <li class="ugbild item1"><a href="#">UG-Beet</a>
                <div>UG-Beet</div>
            </li>
            <li class="ugbild item2"><a href="#">UG-Kinder</a>
                <div>UG-Kinder</div>
            </li>
            <li class="ugbild item3"><a href="#">UG-Kind</a>
                <div>UG-Kind</div>
            </li>
            <li class="ugbild item4"><a href="#">UG-Wohnfläche</a>
                <div>UG-Wohnfläche</div>
            </li>
            <li class="ugbild item5"><a href="#">UG-Behälter</a>
                <div>UG-Behälter</div>
            </li>
            <li class="ugbild item6"><a href="#">UG-Pots</a>
                <div>UG-Pots</div>
            </li>
        </ul>
    </section>

Answer 1

如果我正确理解了这个问题，你需要做的就是添加:

.navigation {
  height: 70px;
  background: #eb9f42;
  position: fixed;
  top: 0;
  width: 100%;
  z-index:1;  /* <========== */
}

Revised jsFiddle