代码之家 › 专栏 › 技术社区 › Juned Ansari

无法使用z索引将div box作为层打开

css html

Juned Ansari · 技术社区 · 8 年前

我试图打开动作分区框作为层,但无法做到这一点。

当我点击动作按钮时,div框将仅在其中打开。它应该作为层打开。

代码:

ul {
  z-index: 2
}

table {
  z-index: 1
}

<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>
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
  <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" style="position: relative;width: 160px;z-index: 99">
            <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>

3 回复 | 直到 8 年前

Gerard 8 年前

使 .btn-group 相对定位和 ul

可以删除z索引。

.btn-group {
  position: relative;
}

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

<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>
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
  <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>

bhansa 8 年前

试试这个

ul.dropdown-menu{
  position:absolute !important;
}

或使用内联样式

<ul class="dropdown-menu pull-right " role="menu" style="position: absolute;width: 160px;z-index: 99">

bhansa 8 年前

覆盖 ul.dropdown-menu 样式使其绝对化,或者使用 !important 或替代内联样式。

ul.dropdown-menu{
  position: absolute !important;
  width: 200px;
  top: 15%;
  left: 20%;
}

ul.dropdown-menu {
  z-index: 2
}

table {
  z-index: 1
  position: relative;
}
ul.dropdown-menu{
  position: absolute !important;
  width: 200px;
  top: 15%;
  left: 20%;
}

<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>
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
  <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" style="position: relative;width: 160px;z-index: 99">
            <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>