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 { ... }

CSS固定了jQuery DataTables所涵盖的菜单栏

1 个答案: