问题描述
我的移动菜单和滑块有问题。我希望菜单位于滑块的顶部。但是当我点击菜单图标时,菜单没有显示。我尝试了很多方法,但仍然没有解决问题。先感谢您。 ` 知识点
<body>
<header>
<nav>
<input type="checkBox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="/img/logo.svg" alt="logo">
<ul>
<li class="el1"><a href="#">lorem</a></li>
<li class="el1"><a href="#">lorem</a></li>
<li class="el1"><a href="#">lorem</a></li>
<li class="el1"><a href="#">lorem</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="slider">
<div class="slide slide1">
<div class="caption">
<h2>Slide1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore,rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
</div>
</div>
<div class="slide slide2">
<div class="caption">
<h2>Slide2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore,rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
</div>
</div>
<div class="slide slide3">
<div class="caption">
<h2>Slide3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore,rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
</div>
</div>
<div class="slide slide1">
<div class="caption">
<h2>Slide1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore,rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
</div>
</div>
</div>
</div>
</body>
代码:https://codepen.io/FilipoV/pen/ExNowKM
解决方法
你将使用 z-index:1;在你的 css 中。
nav ul {
float: right;margin-right: 25px;
z-index: 1;
}