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

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

在Wordpress网站上重叠CSS问题

1 个答案: