Javascript <；i>；元素在区域外不可见

我正在使用带有区域插件的库。我想在播放它的区域的正上方添加一个按钮。但是，按钮不应位于区域内，因为这也会触发

regio click

事件

我曾尝试使用CSS

transform:translateY

使其显示在区域上方，但当按钮滑离区域时，它就不可见了。如中所示，只有红色播放按钮的下半部分可见。我也尝试增加Z指数，但没有效果。注意，按钮需要绑定到区域元素，这样当区域移动/调整大小时，它也会移动

HTML

---

我认为你不能在

画布上显示溢出，皮特谢谢，还有其他方法可以达到这个效果吗？不太确定，从未使用过这个插件
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.regions.min.js"></script>
<h2>wave</h2>
<div id="waveform"></div>
<p align="center">
  <button class="btn btn-primary" onclick="wavesurfer.playPause()">
    <i class="glyphicon glyphicon-play"></i>
    Play
  </button>
</p>

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet'
});

wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

wavesurfer.on('ready', function() {
    wavesurfer.on('region-created', function(reg) {
        const regElem = $('region[data-id="' + reg['id'] + '"]')[0];
        const playRegion = regElem.appendChild(document.createElement('i'));
        playRegion.className = "glyphicon glyphicon-play";
        playRegion.style = "color: red; transform: translateY(-8px)";
        playRegion.addEventListener('click', function() {
            wavesurfer.play(reg['start'], reg['end']);
       });
   });

  wavesurfer.addRegion({
    start: 2, // time in seconds
    end: 5, // time in seconds
    color: 'hsla(100, 100%, 30%, 0.1)'
  });

});