What is the best way to place my modal popup above my text content?

I don't understand why my .btn tag is showing up above my modal on popup. I've tried adjusting the z-index and setting position to relative, but nothing seems to be working as expected. Check out my code below where I have 4 boxes that trigger a modal when clicked on. As you can see, the text is visible above my modal (highlighted in the red boxes).

https://i.sstatic.net/CbykKflr.png

https://i.sstatic.net/pozzzzfg.png

Take a look at 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>

htmlcsssimplemodal

Answer №1

Here is a solution to your issue:

To fix the problem with overlapping boxes, you need to apply z-index only when the box has focus. Otherwise, all boxes will have the same z-index and only the last one will be displayed on top of the others.

In this snippet, I have tried to recreate your issue. I believe the problem arises from your party box having a block formatting context. For more information on formatting contexts, refer to: 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 above snippet demonstrates how to handle z-index issues by setting a higher z-index on the .party box that contains an element with focus like .lighbox-window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The hover feature in the plugin is stuck in an infinite loop

I'm currently working on a plugin that will change the background color of an image to semi-transparent black when it's hovered over. To achieve this effect, I've added a overlay class tag above the image. Since each image may have different ...

javascriptjqueryhtmljquery-pluginsposition

Having a negative position while using overflow auto can cause the element to disappear from

My current issue arises when utilizing negative positioning (e.g. top:-20px) within an absolute div while adding overflow:auto to the parent div. The text becomes hidden in all browsers. Unfortunately, due to the structure of my application, it is not fe ...

htmlcss

The excessive scrolling behavior of Chrome becomes apparent when a fixed division is located at the top of the viewport

I'm back. After noticing a fixed division issue at the top of the viewport, I discovered that Chrome was scrolling too much. To test this behavior, I've created a page where you can see how various browsers handle scrolling, particularly Chrome ...

htmlcssgoogle-chromevertical-scrolling

Combining strings within angular brackets within HTML tags

Is there a way to concatenate strings within jinja brackets {{ }} in HTML? For example: <img src="{{ image.file.name }}"> I want to combine it with the image.file.name. For instance: <img src="{{ 'https://s3.ap-south-1.amazonaws.com/bucket ...

pythonhtmlstringjinja2string-concatenation

What is the best way to style nodes in a Force Directed Graph using CSS in D3?

Currently, I am developing a Force Directed Graph using D3 and managed to make it work with svg circles for the nodes. However, when attempting to use div elements along with CSS left and top properties, the positioning of the nodes seems to be incorrect. ...

javascriptcssd3.jssvgdata-visualization

Let's experiment with creating a horizontal bootstrap form featuring three columns

I am struggling to create a horizontal form with three fields due to the space issue between the label and input type elements. My goal is to minimize the space between the label and input. Here is the HTML code snippet: <div class="container-flu ...

htmlcss

Tips for incorporating a seamless transition effect

Does anyone have a solution for adding a smooth transition effect to this element? https://i.sstatic.net/D6yzE.gif I attempted to achieve this in a JavaScript file, but encountered an issue where each div had a white outline: $(function () { menu = $( ...

javascripthtmljquerycssweb

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

htmljsondojoxmlhttprequest

Modifying the Position of the Search Box within DataTables by Manipulating DOM Elements

As a newcomer to the jQuery datatables plugin, I am still learning how to use it effectively. I have connected the plugin to my tables using the following code: $(document).ready(function() $('#table_id').dataTable({ }); }); ...

javascriptjquerycssdatatables

Issue with Playing Ogg Audio in Chrome When Using Accept-Ranges:Bytes

Having trouble reproducing Ogg audio files using HTML5? Check out the server configuration in BasicHandler.ashx: string oggFileName = @"C:\Users\gustav\Desktop\Player\Files\TestAudio.ogg"; byte[] bytes = File ...

c#asp.nethtmlgoogle-chromeaudio

Exploring the world of interactive storytelling through a basic PHP text adventure

I recently completed coding a text adventure using functions like fgets(STDIN) that works in the command line. Now, I want to convert it to run on HTML (internet browser) but I'm facing a challenge. I am unsure how to transition from this: $choose=0; ...

phphtmlfunction

Utilize the HTML File Selector to access files from the server side

Is there a way to use the HTML file selector <input type="file"> to browse files that are stored on my server rather than locally? I understand that JS is client-side, and despite researching different approaches, I have not come across any suitable ...

javascriptjqueryhtmlajaxserver

Can you help me with sorting asynchronous line points for KineticJS?

For the past couple of days, I've been grappling with a peculiar issue that I found difficult to articulate in the title. The challenge I'm facing involves a KineticJs Line, which contains an array of points (line.attrs.points) represented as ob ...

javascriptjqueryhtmlcanvaskineticjs

Container size is not accommodating elements

Currently in the process of developing a login page and utilizing @media for improved CSS layout on mobile devices. https://i.sstatic.net/LM8q8.png. The issue is that despite implementing @media rules, the inputs and buttons are not extending to the full w ...

htmlcss

The font face feature does not seem to be functioning properly in the IE browser

I'm facing an issue with font face in a jQuery popup. It seems to be working fine on Chrome and Firefox, but it's not rendering properly on IE browsers. Font Face Code in css ---------------------- @font-face { font-family: "pt-sans"; sr ...

cssinternet-explorerfont-face

How to notify when the value of multiple inputs changes using an Angular repeater

I am currently utilizing Angular to generate multiple inputs based on user needs. Although this approach works well, I am struggling to implement a simple alert that would display the values of these inputs. I have managed to retrieve the input values wi ...

javascriptjqueryhtmlcssangularjs

Unpredictable hue of text

Is it possible to fill text with a combination of 2-3 random colors? ...

javascriptcssrandom

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

htmlcssmenu

Comparison of universal and descending selector in CSS

Can someone clarify when to use the universal selector versus the descendant selector in CSS? I've tried finding a clear explanation, but haven't come across one that explains the difference and when each should be used: div * .test{ color: re ...

htmlcsscss-selectors

Ways to prevent a floated element from impacting text-align: center styling?

Within my code, there is a <p> element structured as follows: <div><p>Text Goes Here <span></span</p></div> The CSS I currently have is: div { text-align:center } span { float:right } An issue arises when I populate ...

htmlcss