javascript - Jquery 灯箱不向下延伸

Question

我正在尝试在我正在构建的网站中实现一个灯箱，它可以工作，但由于某种原因，当用户在页面上向下滚动时，灯箱不会向下延伸。

这是 JS/JQuery:

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");

$overlay.append($image);

$("body").append($overlay);

$('#imageGallery a').click(function(event){
  event.preventDefault();
  var $href = $(this).attr("href");
  $image.attr("src", $href);
  $overlay.show();
});

$overlay.click(function(){
  $overlay.hide();
});

这是相关的 CSS:

#overlay {
    background:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    position:absolute
    top:0;
    left:0;
    display:none;
    text-align:center;
}

#overlay img {
    margin-top: 10%;
}

这个问题可能是与其他 CSS 的某种冲突，但我想我会问我是否遗漏了一些明显的东西。谢谢。

Answer 1

将 position:fixed 添加到叠加层，而不是绝对位置。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

关于固定值:

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.