Überlappendes CSS-Problem auf der Wordpress-Website

Question

Ich arbeite an einer Popup-Funktion für eine Website. Ich habe die Website unten verlinkt. Wenn auf jedes Objekt geklickt wird, erscheint ein Popup-Fenster, das bestätigt, dass der Betrachter die Site verlassen wird. Das Problem besteht darin, dass wenn der Betrachter auf einen der Links am unteren Rand der Seite klickt, die Fußzeilen am unteren Rand das Popup überlappen. Ich habe versucht, die Position relativ zu setzen und den Z-Score auf beiden Elementen zu optimieren, aber es hat nicht funktioniert (ich vermute, es ist ein Element Elternteil Problem).

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

Hinweis: Das Popup-Fenster verwendet derzeit nur CSS. Hier ist eine JS Geige des Popup-Code unten:

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

Versuchen Sie, den Z-Index auf Overlay zu ändern und nicht auf Popup direkt, es funktioniert für mich.