Currently, I'm working on a website design project for a friend. The idea is to create a visually appealing layout where the content appears between two curtains resembling a stage. A curtain also hangs across the top of the site. To navigate through the content, users can scroll up and down using div elements as slides, contained within a parent 'slides' div.
The challenge I'm facing now is related to the z-index property. By setting the container's z-index to -1, I achieved the desired effect of having the slides appear underneath the draped curtain at the top. However, this placement causes the main plane to block any clicking events that would typically occur, such as clicking on a button to navigate to other slides.
I'm seeking advice on how to tackle this issue. While I need the -1 z-index on the container for the sliding effect, it's also hindering interactive elements on the main plane. Any suggestions or solutions are welcome!
.container {
pointer-events: none;
a {
text-decoration: none;
color: #FFF;
}
position: relative;
background-image: url('../images/curtains.png');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 0 -100px;
.slide {
pointer-events: none;
position: relative;
overflow: hidden;
width: 100%;
height: 880px;
background-color: #000;
color: #FFF;
text-align: center;
z-index: -1;
pointer-events: none;
.content {
position: relative;
width: 800px;
margin: 0 auto;
background-color: green;
}