Trying to display div over table - html

Question

I have tried to display div over table using z-index. I have searched on google about z-index. The information i got that z-index will only work on an element whose position property has been explicitly set to absolute , fixed , or relative. But it is still not working for me.
Please check my code and please explain what is the issue.
.task {
position: relative;
z-index: 1;
}
#check_filter {
width: 200px;
padding: 20px;
float: left;
position: absolute;
z-index: 2!important;
margin-left: 60px;
margin-top: 7px;
box-shadow: 1px 0px 20px 1px grey;
}
#radio_filter {
width: 200px;
padding: 20px;
float: left;
position: absolute;
z-index: 2!important;
margin-left: 180px;
margin-top: 7px;
box-shadow: 1px 0px 20px 1px grey;
}
Filters: Assigned To | Done
<div id="check_filter">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
</div>
<div id="radio_filter">
<div class="radio">
<label><input type="radio" name="yes">Yes</label><br>
<label><input type="radio" name="no">No</label>
</div>
</div>
<br>
<table class="task" style="margin-top:30px; width:100%!important;">
<thead>
<tr style="background-color:black;color:white;">
<th>Task id</th>
<th>Task name</th>
<th>Task description</th>
<th>Assigned to</th>
<th>Done(yes/no)</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Answer 1

Your DIVs are already over table. You can't notice it, because the background of DIVs is transparent... To see/understand that, add background to DIVs.
.task {
position: relative;
z-index: 1;
}
#check_filter {
width: 200px;
padding: 20px;
float: left;
position: absolute;
z-index: 2!important;
margin-left: 60px;
margin-top: 7px;
box-shadow: 1px 0px 20px 1px grey;
}
#radio_filter {
width: 200px;
padding: 20px;
float: left;
position: absolute;
z-index: 2!important;
margin-left: 180px;
margin-top: 7px;
box-shadow: 1px 0px 20px 1px grey;
}
[id$="filter"] {
background: white
}
Filters: Assigned To | Done
<div id="check_filter">
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
</div>
<div id="radio_filter">
<div class="radio">
<label><input type="radio" name="yes">Yes</label><br>
<label><input type="radio" name="no">No</label>
</div>
</div>
<br>
<table class="task" style="margin-top:30px; width:100%!important;">
<thead>
<tr style="background-color:black;color:white;">
<th>Task id</th>
<th>Task name</th>
<th>Task description</th>
<th>Assigned to</th>
<th>Done(yes/no)</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>