在画廊下确实消失了:我该如何解决

Question

我的导航在滚动时消失在画廊下。我没有在图片中使用任何Z-Height，也不知道该如何解决。

也在报价部分中，块与导航重叠。

我曾尝试使用Z -Height，但没有帮助 - 图片下仍然消失。

我的整个代码不适合这里，因此请使用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;  /* <========== */
}

修订后的JSFIDDLE