如何在td标记内叠加音频标记

Question

我正试图覆盖一个html音频标签，但我找不到办法做到这一点，即使我设置z-index音频播放器始终保持在顶部，有没有办法覆盖它？

#overlay {
 position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 <td class="overlay" onclick="alert('test');">
 <a > 
  <audio controls id="audio" preload="all" autoplay > 
  </audio> 
 </a>
</td>

Answer 1

你有几个错误，我已经完成了纠正错误的片段。

但是，最重要的是，如果在最后yopu设置绝对位置，将音频包装在表格中是没有意义的，似乎你的方法在某种程度上是无用的。

td {
  border: solid 1px blue;
}

table {
  border-collapse: collapse;
}

<table>
  <tr>
    <td>first</td>
    <td class="overlay" onclick="alert('test');">
      <a>
        <audio controls id="audio" preload="all" autoplay> 
  </audio>
      </a>
    </td>
    <td>last</td>
  </tr>
</table>