Javascript jQuery数据表覆盖的CSS固定菜单栏

我在我的页面和一些表格的顶部钉住了/粘贴导航菜单栏。为了使表更具交互性，我使用jQuery的。在使用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>

CSS:
.sticky{位置：固定；高度：2.2米；宽度：100%；顶部：0；左侧：0；背景色：rgb（224）；}
.li{显示：内联块；}
.sticky*{display:inline；}
HTML:
报告名

飞往：





报头

我用的桌子

<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>

$（文档）.ready（函数（）{
$（“#示例”）.dataTable（）；
} );

及

通过添加

z-index: 9999;

到

.sticky { ... }

---

求解者：z-指数：9999；

.sticky { ... }