unable to open div box as layer using z-index - html

Question

I am trying to open action div box as layer in but unable to do that.
when i click on action button div box will open within that only. it should be open as layer.
Code:
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><span class="glyphicon glyphicon-fullscreen"></span> View</li>
<li><span class="fa fa-edit"></span> Add Lead Update</li>
<li><span class="fa fa-edit"></span> Edit</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>

Answer 1

Make the .btn-group positioned relative and the ul positioned absolute. You may want to change the absolute positioning according to your liking.
The z-index can be removed.
.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><span class="glyphicon glyphicon-fullscreen"></span> View</li>
<li><span class="fa fa-edit"></span> Add Lead Update</li>
<li><span class="fa fa-edit"></span> Edit</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>

Answer 2

Try this
ul.dropdown-menu{
position:absolute !important;
}
or use inline styles
<ul class="dropdown-menu pull-right " role="menu" style="position: absolute;width: 160px;z-index: 99">

Answer 3

Override the ul.dropdown-menu styles to make it absolute, either use !important or override the inline styles.
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><span class="glyphicon glyphicon-fullscreen"></span> View</li>
<li><span class="fa fa-edit"></span> Add Lead Update</li>
<li><span class="fa fa-edit"></span> Edit</li>
<li><span class="glyphicon glyphicon-trash"></span> Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>