I am not sure why my tag (.btn) is appearing above my modal on popup. I have tried z-index but its not working even though position is relative. Please see my code below. I have 4 boxes when you click on the word the modal pops up. You can see that the text is showing above my modal (shown in the red blocks)
Here is my code:
<code>.lightbox-window {
position: fixed;
background-color: rgba(50, 50, 50, 0.95);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
&:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
&>div {
width: 430px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
background: white;
}
}
.lightbox-close {
line-height: 50px;
position: absolute;
right: -20px;
text-align: center;
top: -20px;
width: 10px;
text-decoration: none;
font-weight: 900;
border-radius: 3em;
background: #212121;
color: #fff;
font-size: 1.25em;
padding: .1em .9em;
cursor: pointer;
&:hover {
color: #F31780;
}
}
.btn {
font-family: "Bebas Neue", sans-serif;
background-color: transparent !important;
color: #fff;
font-size: 47px;
text-align: center;
text-decoration: none;
font-weight: 300;
border-width: 0px !important;
border-style: none !important;
transition: none !important;
position: relative;
display: inline-block;
z-index: 0 !important;
padding: 0.96rem 8.29rem;
&:hover {
color: white;
}
}
.image img {
max-height: 250px;
width: 100%;
text-align: center;
}
.party {
display: flex;
align-items: center;
justify-content: center;
}</code>
<code>.lightbox-window {
position: fixed;
background-color: rgba(50, 50, 50, 0.95);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
&:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
&>div {
width: 430px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
background: white;
}
}
.lightbox-close {
line-height: 50px;
position: absolute;
right: -20px;
text-align: center;
top: -20px;
width: 10px;
text-decoration: none;
font-weight: 900;
border-radius: 3em;
background: #212121;
color: #fff;
font-size: 1.25em;
padding: .1em .9em;
cursor: pointer;
&:hover {
color: #F31780;
}
}
.btn {
font-family: "Bebas Neue", sans-serif;
background-color: transparent !important;
color: #fff;
font-size: 47px;
text-align: center;
text-decoration: none;
font-weight: 300;
border-width: 0px !important;
border-style: none !important;
transition: none !important;
position: relative;
display: inline-block;
z-index: 0 !important;
padding: 0.96rem 8.29rem;
&:hover {
color: white;
}
}
.image img {
max-height: 250px;
width: 100%;
text-align: center;
}
.party {
display: flex;
align-items: center;
justify-content: center;
}</code>
.lightbox-window {
position: fixed;
background-color: rgba(50, 50, 50, 0.95);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
&:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
&>div {
width: 430px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
background: white;
}
}
.lightbox-close {
line-height: 50px;
position: absolute;
right: -20px;
text-align: center;
top: -20px;
width: 10px;
text-decoration: none;
font-weight: 900;
border-radius: 3em;
background: #212121;
color: #fff;
font-size: 1.25em;
padding: .1em .9em;
cursor: pointer;
&:hover {
color: #F31780;
}
}
.btn {
font-family: "Bebas Neue", sans-serif;
background-color: transparent !important;
color: #fff;
font-size: 47px;
text-align: center;
text-decoration: none;
font-weight: 300;
border-width: 0px !important;
border-style: none !important;
transition: none !important;
position: relative;
display: inline-block;
z-index: 0 !important;
padding: 0.96rem 8.29rem;
&:hover {
color: white;
}
}
.image img {
max-height: 250px;
width: 100%;
text-align: center;
}
.party {
display: flex;
align-items: center;
justify-content: center;
}<code><div class="party">
<a class="btn" href="#open-lightbox">PARTY</a>
<div id="open-lightbox" class="lightbox-window">
<div class="lightbox">
<span class="image">
<img src="https://static1.squarespace.com/static/64fc2b1002c42359825bbc03/t/66ae1f204ee13330597a3dcc/1722687270723/Untitled-3.png"/></span>
<a href="#void" title="Close" class="lightbox-close">X</a>
<h3>PARTY</h3>
<div class="paragraph">Enjoy the best party scenes Africa has to offer. Everything from unforgettable night outs, to the hottest boozy brunches, Kampala has it all.</div>
<a class="btn2" href="https://www.oliwatravel.com/book-now">BOOK NOW</a>
<br>
</div>
</div>
</div></code>
<code><div class="party">
<a class="btn" href="#open-lightbox">PARTY</a>
<div id="open-lightbox" class="lightbox-window">
<div class="lightbox">
<span class="image">
<img src="https://static1.squarespace.com/static/64fc2b1002c42359825bbc03/t/66ae1f204ee13330597a3dcc/1722687270723/Untitled-3.png"/></span>
<a href="#void" title="Close" class="lightbox-close">X</a>
<h3>PARTY</h3>
<div class="paragraph">Enjoy the best party scenes Africa has to offer. Everything from unforgettable night outs, to the hottest boozy brunches, Kampala has it all.</div>
<a class="btn2" href="https://www.oliwatravel.com/book-now">BOOK NOW</a>
<br>
</div>
</div>
</div></code>
<div class="party">
<a class="btn" href="#open-lightbox">PARTY</a>
<div id="open-lightbox" class="lightbox-window">
<div class="lightbox">
<span class="image">
<img src="https://static1.squarespace.com/static/64fc2b1002c42359825bbc03/t/66ae1f204ee13330597a3dcc/1722687270723/Untitled-3.png"/></span>
<a href="#void" title="Close" class="lightbox-close">X</a>
<h3>PARTY</h3>
<div class="paragraph">Enjoy the best party scenes Africa has to offer. Everything from unforgettable night outs, to the hottest boozy brunches, Kampala has it all.</div>
<a class="btn2" href="https://www.oliwatravel.com/book-now">BOOK NOW</a>
<br>
</div>
</div>
</div>1