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

关于 fixed 值：

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.

Jquery 灯箱没有向下延伸

Jquery lightbox doesn't extend downward

javascript

css

jquery

lightbox