页面内容显示在菜单栏上?

时间:2017-03-06 20:59:13

标签: javascript jquery html css

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

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

<!-- 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-&gt;

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

和结束标签。抱歉无法提供完整代码 - &gt;&gt;&gt;&gt;

问题是什么。为什么会发生这种情况......

1 个答案:

答案 0 :(得分:0)

将此添加到导航栏样式

z-index: 99999;

它应该有用