由jQuery DataTables覆盖的CSS固定菜单栏

Question

我在页面和一些表格的顶部固定了/粘性导航菜单栏。为了使表更具交互性，我使用了jQuery的DataTables。在使用jQuery之前，一切都还可以。现在，每当我向下滚动时，每个表都会覆盖我的菜单，我甚至无法点击它进行导航。

这是我的固定/粘贴导航菜单条形码，感谢您的提前帮助。

CSS:
.sticky     { position: fixed; height: 2.2em; width: 100%; top: 0; left: 0; background-color: rgb(224,224,224); }
.sticky li  { display: inline-block; }
.sticky *   { display: inline; }
HTML:
<div class="sticky">
   <reportname>reportname</reportname>
   <ul>
       fly to:
       <li> <a href=#Samples>    Samples    </a> </li>
       <li> <a href=#Navigation> Navigation </a> </li>
       <li> <a href=#Tables>     Tables     </a> </li>
       <li> <a href=#Plots>      Plots      </a> </li>
   </ul>
   <reporthead>reporthead</reporthead>
</div>

对于表格，我使用

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
<script>        
$(document).ready(function() {
   $('#example').dataTable();
} );
</script>

和

<table id="example" class="display" cellspacing="0" width="100%">

Answer 1

通过添加解决

z-index: 9999;

到

.sticky { ... }