在Wordpress站點上重疊CSS問題

Question

我正在爲網站提供彈出功能。我有下面鏈接的網站。點擊每個新聞項目後，會出現一個彈出框，以確認觀看者即將離開該網站。問題是如果觀看者點擊頁面底部附近的鏈接之一，底部的頁腳欄與彈出框重疊。我嘗試設置相對位置並調整兩個元素上的Z值，但它不起作用（我猜這是元素父問題）。

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

注：彈出框目前只使用CSS。這是下面的代碼彈出的JS提琴：

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

嘗試直接改變疊加的z-index的，而不是彈出，它爲我工作。