2017-03-06 23 views
0

我面临着一种问题,可能我不能正确地告诉你们。我正在使用一个管理系统,我的菜单栏固定显示整个页面。意味着菜单栏始终显示。但问题是 - >我的其他页面内容显示在我的菜单栏上,发生了。请在下面显示此图片 - >enter image description here页面内容在菜单栏上显示?

看我的搜索框显示在我的菜单栏上。当我滚动我的页面时发生这种情况。 首先,我的菜单栏位于我的身体标记内。为了解决这个问题,把它带到了头标签 - >但仍然存在问题。 代码 - >

<!-- top navigation bar --> 
<div style="position: fixed; width: 100%" class="w3-container w3-teal"> 
<ul class="w3-navbar w3-container"> 
    <li class="w3-right" ><a href="destroy.php">Log Out</a></li> 
    <li class="w3-right w3-dropdown-hover w3-hover-orange"> 
     <a class="w3-hover-orange" >Options<i class="fa fa-caret-down"> </i></a> 
     <div class="w3-dropdown-content w3-white w3-card-4"> 
     <a href="changepassword.php">change password</a> 
     </div> 
    </li> 
    <li class="w3-right" ><a href="userprofile.php">User Profile</a></li> 
    <li class="w3-right" ><a href="index.php">Home</a></li> 
    <li class="w3-right" ><button class="w3-btn w3-black" id="sgo">Go</button></li> 
    <li class="w3-right" ><input type="text" class="w3-input" id="text-search" placeholder="Search.."></li> 
    </ul> 
    </div> 
    <!-- end of top navigation bar --> 

和身体 - >

<body class="w3-theme"> 
<?php include 'pageSideNavigationBar.php'; ?> 
<section class="w3-row-padding w3-theme" style="margin-left:165px;" id="main-content"> 
    <div id="guts"> 
    <a style=" margin-left: 88%;width: 11%;border-radius: 2px;" class="w3-btn-block w3-green w3-section w3-padding" onclick="$('#addABatch').show()">Add A Batch</a><br> 
    <!-- TABLE TO SHOW THE DATA --> 
    <div class="w3-container"> 
     <p>Available Batch details....</p> 
     <table id="myTable" class="display" data-page-length="25" data-order="[[ 1, &quot;asc&quot; ]]" width="100%"> 
     <thead> 
      <tr> 
      <th>Batch Code</th> 
      <th>Course Name</th> 
      <th data-orderable="false">Batch Starting Date</th> 
      <th>Faculty Name</th> 
      <th>Room Number</th> 
      <th>Amount</th> 
      <th>Routine</th> 
      <th>Delete Batch</th> 
      </tr> 
     </thead> 
     <tbody> 

和结束标记。对不起,不能给出完整的代码 - >>>>

是什么问题。为什么会发生.....

回答

0

添加到您的导航栏的风格

z-index: 99999; 

它应该工作

+0

这里我要补充它 - >在页面样式或页面顶部导航栏的内容... –

+0

o我的天啊 - >它的工作原理.... –

+0

太棒了!如果你问它是什么,它会在元素之上排列元素,最大的z-index是如何显示的。 –