htmlcsssimplemodal

How can I position my modal popup to be above my text?

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)

enter image description here

enter image description here

Here is my 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;
}
<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>

Solution

  • from my comment

    z-index should be applied when it has the focus, else each box has the same z-index and only the last one will show on top of the others

    here is a snippet trying to reproduce your issue while i believe your party box have a block formatting context introducing your issue : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts

    .lightbox-window {
  position: fixed;
  background-color: rgba(50, 50, 50, 0.95);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index:0;
  pointer-events: none;
  transition: all 0.3s;
  &:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index:1;
  }
  &>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;
}

/* trigger z-index only on focused part */

/*demo */
body {
background:#aaa;
display:flex;
gap:1em;
}
.party {
aspect-ratio:1;
min-width:150px;
flex:1 1 auto;
background:green;
display:grid;
place-content:center;
}
    <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>
<div class="party">
  <a class="btn" href="#open-lightbox2">PARTY 2</a>

  <div id="open-lightbox2" 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>
<div class="party">
  <a class="btn" href="#open-lightbox3">PARTY 3</a>

  <div id="open-lightbox3" 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>

    The snippet triggers a higher z-index on the .partybox which has an element .lighbox-windowreceiving the focus.