モーダルの背景をビューポートの下部ではなくページの下部に移動させるにはどうしたらいいですか？

Question

私はこのポートフォリオのウェブサイト上の写真のライトボックスを作る必要があります。単純なライトボックスのように、画像がクリックされると元のサイズになるように、私はすべてが絡まっています。しかし、私が抱えている問題は、モーダルの背後にある背景が、ページの一番下までずっと、ビューポートの一番下までしかないということです。私が提供できる追加情報があれば教えてください。

Lightbox Problem

#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 { 
    border-radius: 4px solid white; 
    margin-top: 10%; 
} 

#overlay p { 
    color: white; 
} 

Answer 1

変更位置このように固定する：

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