Html 修正了添加flexslider后导航栏不再固定的问题

我刚刚开始学习HTML和CSS，在添加定时flexslider之前，我创建了一个简单的顶部导航栏，它固定在页面顶部。添加滑块后，导航栏不再固定在视口顶部，即使我没有更改导航栏CSS。提前感谢您的任何想法

我的HTML是：

 <div class="top-bar">

   <section class="logo">
      <ul>
        <li><a href="#"><img src="img/logo.jpg" id="logo"></a></li>
      </ul>
    </section>   

    <section class="nav-bar">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </section>

---

再次感谢您的帮助

你能制作一个演示让我们更好地理解这个问题吗？（JSBin，Plunker，JSFIDLE…）谢谢！我在初始化时将我的主CSS样式表移动到flexslider样式表的下方，从而解决了这个问题。谢谢你做得对！大多数情况下，您希望在库中的样式表之后包含自己的样式表。因此，可以替代用于自定义的样式。另一个很好的例子是当您想要个性化引导默认主题时。

.top-bar {
    width: 100%;
    height: 7.5%;
    top: 0;
    opacity: 0.8;
    position: fixed;
    z-index: 10;
    display: inline-block;
}


#logo {
    width: 2.0vw;
    z-index:20;
}

.nav-bar {
    position: fixed;
    right: 27.5%;
    z-index: 15;
}