html - z-index 在 jquery 数据表中不起作用

Question

我无法将操作框显示为上层，我也尝试了 z-index 但没有任何变化。

$(document).ready(function () {
                                
                                $('#dataTables-example').DataTable({
                                    "scrollX": true,
                                    "bSort": false,
                                    aLengthMenu: [
                                        [10, 25, 50, 100, 200, -1],
                                        [10, 25, 50, 100, 200, "All"]
                                    ],
                                    iDisplayLength: 10
                                });
                                
                            });

.btn-group {
  position: relative;
}

ul.dropdown-menu.pull-right {
  position: absolute;
  top: 0;
  left: -160px;
  width: 160px;
  z-index:99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example" style="z-index:1">

  <thead>
    <tr>
      <th>Sr.No</th>
      <th>LeadCreated DateTime</th>
      <th>RetailerName</th>
      <th>ShopName</th>
      <th>Mobile</th>
      <th>Address</th>
      <th>City</th>
      <th>Pincode</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

    <tr class="odd gradeX">
      <td>1</td>
      <td>10-10-2017</td>
      <td>Test</td>
      <td>Test</td>
      <td>9904773479</td>
      <td>Surat</td>
      <td>Surat</td>
      <td>304230</td>
      <td style="background: <?php if ($row->Status == 'InProcess') echo 'green';if ($row->Status == 'Closed') echo 'orange';if ($row->Status == 'Dead') echo 'black'; ?>;color: #FFFFFF">
        <?= $row->Status ?>
      </td>
      <td class="pbutton">
        <div class="btn-group">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                                                                Action <span class="caret"></span>
                                                            </button>
          <ul class="dropdown-menu pull-right " role="menu">
            <li><a href="#viewleadmodal" data-id="<?= $row->LeadId ?>" data-toggle="modal" data-target="#viewleadmodal"><span class="glyphicon glyphicon-fullscreen"></span>&nbsp;View</a></li>
            <li><a href="followup.php?LeadId=1"><span class="fa fa-edit"></span>&nbsp;Add Lead Update</a></li>
            <li><a href="leadedit.php"><span class="fa fa-edit"></span>&nbsp;Edit</a></li>
            <li><a href="javascript:void(0)" onclick="check_perform_sdelete('14');"><span class="glyphicon glyphicon-trash"></span>&nbsp;Delete</a></li>
          </ul>
        </div>
      </td>
    </tr>

  </tbody>
</table>

Answer 1

这里.dataTables_scrollBody有overflow: auto。您必须将其移除，但移除后，结构将被破坏。所以你必须调用表外的操作框，然后使用操作框中的位置。实际上溢出:auto 正在隐藏 Action Box，它位于 .dataTables_scrollBody 之外。