html - 导航在图库下确实消失了:我该如何解决这个问题?
问题描述
滚动时,我的导航消失在我的画廊下。我没有为图片使用任何 z 高度,我不知道如何解决这个问题。
同样在引用部分,块引用只是与导航重叠。
我曾尝试使用 z 高度,但没有帮助 - 导航仍然消失在图片下方。
我的整个代码不适合这里,所以请使用 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>
解决方案
如果我正确理解了这个问题,您需要做的就是添加:
.navigation {
height: 70px;
background: #eb9f42;
position: fixed;
top: 0;
width: 100%;
z-index:1; /* <========== */
}
推荐阅读
- html - 用于 2 个不同 URL 的 Angular 6 路由器活动链接
- ios - UITableView - 设置页脚和页眉 - 我如何使用表格视图单元格设置滚动
- regex - 正则表达式不应以“开头或结尾”
- python - 运行上述代码后,为什么我只得到 type() 函数的一个输出?为什么不为所有三个?
- couchbase - 我正在使用 couchbase 服务器并且我正在使用连接但是我想将 DATE_RANGE_STR() 函数附加到特定的文档类型
- svg - 如何使带有居中文本的SVG黑条响应?
- javascript - 检测元素何时位于屏幕顶部
- bootstrap-4 - 在物化或引导框架中宽度 html 按钮的最佳方法是什么?
- react-admin - react-admin 如何创建客户端列表控制器
- sql-server - SSMS 查询 - 插入数据时提示?