有粘性元素时如何将div移到前景？

Question

我有一个带有绝对定位的元素的标头（想象这是一个下拉列表）。之后，我有了一个带有数据和粘性标头的大表。

<div class="wrapper">
<div class="panel">
  <div class="dropdown">

  </div>
</div>
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      <-- data -->
    </tbody>
  </table>
  </div>

css：

.panel {
  background: yellow;
  height: 40px;
  position: sticky;
  top: 0;
  width: 100%;
}

.dropdown {
  position: absolute;
  left: 10px;
  height: 200px;
  width: 200px;
  background: blue;
  z-index: 1000;
}

table {
  background: green;
  width: 100%;
}

thead th {
  background: orange;
  position: sticky;
  top: 40px;
}

提琴：https://jsfiddle.net/sh90fo4k/1/

为什么我不能用下拉菜单重叠表头？

Answer 1

尝试这个