叠加按钮不可点击

Question

我试图自己制作基于Web的幻灯片，但是我偶然发现使工具栏出现在每张幻灯片上方：按钮不可单击。 我在这个最小工作示例中重现了这个问题。如果单击该按钮，除了单击幻灯片以外，它不会执行任何操作。但是，按钮的z索引大于幻灯片的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

div.slide在按钮的前面，并捕获所有事件。

我认为将所有控件放置在位于幻灯片前面的单独的绝对.div中是有道理的。

Answer 2

好，我找到了，我只需要设置

position:absolute;

在按钮#fullscreenbutton上。