Question

我正在尝试打开动作div框作为图层但无法执行此操作。

当我点击动作按钮时，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>

Answer 1

试试这个

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

或使用内联样式

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

Answer 2

使.btn-group位于相对位置且ul位于绝对位置。您可能希望根据自己的喜好更改绝对定位。

可以删除z-index。

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

Answer 3

覆盖!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%;
}

＆＃13;

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

＆＃13;

foreach ($login_and_logout_list['rval'] as $k => $v) {
  $login_time[] = $v['login_time'];
  $logout_time[] = $v['logout_time'];
  $create_time[] = $v['create_time'];
  $i++;
}
var_dump($login_time);

＆＃13;

无法使用z-index打开div框作为图层

3 个答案: