Overlapping CSS issue on Wordpress site

Question

I am working on a popup functionality for a website. I have the site linked below. When each press item is clicked on, a popup box appears to confirm that the viewer is about to leave the site. The issue is if the viewer clicks on one of the links near the bottom of the page, the footer bars at the bottom overlap the popup. I've tried setting the position to relative and tweaking the z-score on both elements, but it did not work (I am guessing it's an element parent issue).

http://novexbiotech.emorydayclients.com/press/

Note: The popup box currently uses CSS only. Here is a JS fiddle of the popup code below:

https://jsfiddle.net/r1goLbqw/

HTML 
<!-- Anchor -->
<a href="#popup1">Course Login</a>

<!-- Popup -->

<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Student Portals</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
            Content
        </div>
    </div>
</div>

CSS
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
}
.overlay.light {
  background: rgba(255, 255, 255, 0.5);
}
.overlay .cancel {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  text-align:center;
  margin: 75px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #666;
  width: 400px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  position: relative;
  top:300px;
}
.light .popup {
  border-color: #aaa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.popup h2 {
  margin-top: 0;
  color: #666;
  font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  opacity: 0.8;
  transition: all 200ms;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #666;
}
.popup .close:hover {
  opacity: 1;
}
.popup .content {
  max-height: 400px;
}
.popup p {
  margin: 0 0 1em;
}
.popup p:last-child {
  margin: 0;
}


Thanks for the help! 

Answer 1

Try to change the z-index on overlay and not on popup directly, it works for me.