Html 覆盖按钮不可点击

我试图自己制作基于网络的幻灯片，但我无意中在每张幻灯片上方都显示了一个工具栏：按钮是不可点击的。 我在这个准最小工作示例中重现了这个问题。如果你点击按钮，除了点击幻灯片，它不会做任何事情。但是，按钮的z索引大于幻灯片的z索引

如何将元素保留在树中的位置，并使按钮可单击

#全屏按钮{
z指数：1001；
}
.幻灯片{
显示：块；
宽度：100%；
填充底部：56.25%；/*16:9*/
位置：相对位置；
溢出：隐藏；
}
.幻灯片{
位置：绝对位置；
顶部：0；底部：0；左侧：0；
宽度：100%；
字体大小：1.5vw；
填充：20px；
框大小：边框框；
z指数：1000；
}

把我弄红
这张幻灯片覆盖了所有内容

div.slide

位于按钮前面，捕获所有事件

---

我认为将所有控件放在一个单独的、绝对的

.div

中是有意义的，该控件位于幻灯片前面。

div.slide

位于按钮前面并捕获所有事件

---

我认为将所有控件放在幻灯片前面的一个单独的绝对

.div

中是有意义的。

好的，我找到了，我只需要设置一下

position:absolute;

---

在按钮

#全屏按钮上

好的，我找到了，我只需要设置一下

position:absolute;

---

在按钮

#fullscreenbutton

“但是，按钮的z索引大于幻灯片的z索引”-您没有在代码中的任何位置设置按钮的z索引。没有ID为

#fullscreenbutton

的元素。此外，z-index仅适用于位置

相对/绝对/固定

元素。我刚刚修复了该部分，问题仍然存在。按钮仍然没有使用

位置：相对

、

绝对

或

固定

，因此z-index将被忽略。“但是，按钮的z-index大于幻灯片的z-index”-您没有在代码中的任何位置设置按钮的z索引。没有ID为

#fullscreenbutton

的元素。此外，z-index仅适用于位置

相对/绝对/固定

元素。我刚刚修复了该部分，问题仍然存在。按钮仍然没有使用

位置：相对

、

绝对

或

固定

，因此z-index将被忽略。