css 下拉菜单在幻灯片下

Question

我正在使用 css3 创建一个 css 下拉菜单。导航之后，该页面有一个幻灯片。问题是当我将鼠标悬停在下拉菜单上时，它位于幻灯片下方，因此无法看到下拉元素。

我不知道在哪里修复，导航还是幻灯片？

这是幻灯片的代码:

.sp-slideshow {
position: relative;
margin: 10px auto;
width: 100%;
max-width: 1000px;
min-width: 260px;
height: 360px;
color:#000;

Answer 1

尝试将 z-index 添加到幻灯片包装器和菜单。

例如:

HTML

<div class="nav">

</div>
<div class="content">
  <div class="slider">

  </div>
</div>

CSS

.nav{
  z-index:100;
}

.slider{
  z-index:80;
}

z-index 属性指定元素的堆叠顺序。

具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

注意:z-index 仅适用于定位元素(position:absolute、position:relative 或 position:fixed)。

希望这对您有所帮助，如果没有帮助请告诉我。

干杯马可。