html - 试图在表格上显示 div

Question

我尝试使用 z-index 在表格上显示 div。我在谷歌上搜索了关于 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>