尝试在表格上显示div

Question

我尝试使用z-index在表上显示div。我在Google上搜索了有关z-index的信息。我得到的z-index信息仅适用于其position属性已显式设置为absolute，fixed或relative的元素。但是它仍然对我不起作用。 请检查我的代码，然后说明问题所在。

.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:&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="assign">Assigned To</a> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="done">Done</a>
<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

您的DIV已超出表格。您不会注意到它，因为DIV的背景是透明的。要查看/理解这一点，请为DIV添加背景。

.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:&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="assign">Assigned To</a> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="done">Done</a>
<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>