I've been working on creating web-based slides from scratch, but I'm running into an issue with getting a toolbar to display above each slide - the buttons aren't responding when clicked. To demonstrate this problem, I've set up a sample code snippet below. When you click on the button, nothing happens except that it registers a click on the slide itself. Interestingly, the z-index of the button is higher than that of the slide.
Is there a way to keep the elements in their current position within the tree and still make the button clickable?
#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>