JQuery lightbox не распространяется вниз

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 О значение:

Не оставляйте пространство для элемента. Вместо этого расположите его на указанной позиции относительно экрана просмотра экрана и не перемещайте его при прокрутке. При печати разместите его в этом фиксированном положении на странице на каждой странице.