html - 覆盖按钮不可点击

Question

我正在尝试自己制作基于网络的幻灯片，但我无意中发现每张幻灯片上方都会出现一个工具栏:按钮不可点击。 我在这个准最小工作示例中重现了这个问题。如果单击按钮，除了单击幻灯片外，它不会执行任何操作。但是，按钮的 z-index 大于幻灯片的。

如何将元素留在原处(在树中)并使按钮可点击？

#fullscreenbutton {
  z-index: 1001;
}
.slides {
  display: block;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  font-size: 1.5vw;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1000;
}

<div id="app">
  <div class="slides" id="slides">
    <button id="fullscreenbutton" onclick="this.style.color='red'">Make me red</button>
    <div class="slide" ignore-position="current">
      this slide overrides everything
    </div>
  </div>
</div>

Answer 1

解决这个问题的一种方法是从底层元素中删除非 css 操作:

.slide {
   ...
  pointer-events: none
}

Fiddle Example