css - 下一部分与第一部分重叠,即使使用 z-index
问题描述
我正在尝试使导航菜单重叠每个部分。但我正在尝试使用 z-index 但在这种情况下似乎不起作用。
我正在尝试许多解决方案,例如为所有元素添加位置,但仍然无法正常工作。这是我的 HTML 代码
<div class="wrap-content">
<header class="header">
<div class="header__center">
<nav class="header__center--nav">
<ul>
<li class="main-menu"><a class="main-menu__a" href=""><span class="flaticon-right-arrow main-menu__a"></span>
Elements</a>
<div class="wrapper-menu">
<div class="row">
<div class="col-xl-3 col-lg-3">
<h3>Classic</h3>
<div class="menu-1">
<ul>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3">
<h3>Pretentation</h3>
<div class="menu-1">
<ul>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>Contact</a></li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3">
<h3>Infographic</h3>
<div class="menu-1">
<ul>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-3">
<h3>Typography</h3>
<div class="menu-1">
<ul>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
<li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</header>
<section class="section-1">
<div class="container">
<div class="row">
<div class="col-6">
<div class="col-6__inner">
<h1>Incredible app
<span class="col__inner--trade">features</span></h1>
<span></span>
</div>
<div class="col-6__title">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo sdam dolorem debitis quod.</h3>
</div>
</div>
<div class="col-6">
<div class="col-6__phone">
<div class="img-phone-1">
<img src="./img/phone-img/phone-2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
</div>
这是我将 nav-menu 的 z-index 设置为 9999 后的结果。在 此处输入图像描述
解决方案
Z-index 仅适用于定位元素 -
- 位置:绝对
- 位置:相对
- 位置:固定
- 位置:粘性
因此,根据您要实现的目标,您可能需要将导航固定在顶部吗?
例如这样的事情:
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
推荐阅读
- javascript - 无法将某些文件上传到 Google Drive?
- javascript - 无法在 react-redux-form 控件中包装 react-autocomplete 元素
- android - AWS Mobile 内置登录问题
- highcharts - 如何减少高车周围的面积?
- java - 显示居中对齐的 Web 视图
- vba - 在VBA的列中选择可变的空白单元格范围
- java - 如何使用 Jerseys @Path AND java.nio.file.Path?
- javascript - Typescript 2d 数组定义引发错误
- machine-learning - 经过训练的 SVM 的训练准确率为 0%
- python - 在一行中的列表中访问字典中的列表值