html - UIkit 幻灯片元素覆盖了导航栏

Question

我的初始网页是一个长长的滚动页面。我正在使用 UIkit，并成功添加了许多元素。我在顶部添加了一个标准的导航栏。当我向下滚动页面时，我的问题发生了。大多数元素都像人们预期的那样滚动到栏后面，但我的一些元素滚动到导航栏上方——图片和文本。

执行此操作的元素使用 uk-slideshow 属性。

这里是有问题的两个元素的 HTML:

 <!-- Nav Bar -->
<nav class="uk-navbar" data-uk-sticky>
  <ul class="uk-navbar-nav">
    <li><a href="">Contact</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Services</a></li>
  </ul>
</nav>

还有幻灯片……

<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
  <li>
    <div class="person">Sara
      <img src="images/agent_p2.jpg" class="id">
      <p>Lorem ipsum ... </p>             
    </div>
  </li>
</ul>

为什么会这样？

Answer 1

我解决了这个问题。 Uikit 中的 uk-navbar 没有分配 z-index。在导航中添加了一个 z-index，它解决了这个问题。