Сделать оверлей фиксированным, но контейнер содержимого прокручивается

Question

Мой код создает наложение, где он блокирует страницу черным цветом, и внутри внутреннего контейнера есть форма. Когда он активен, он блокирует страницу, но наложение является абсолютным и растягивает только ширину окна и высоту 100%, когда я прокручиваю вниз, наложение не растягивается.

Когда я исправляю его, он остается в одном месте, но его содержимое не прокручивается.

Как сделать его неподвижным, но также прокручиваемым?

.quote_overlay, .email_overlay { 
    display: none; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    background-image: url(img/overlay_bg.png); 
} 

.quote_container, .email_container { 
    width: calc(100% - 20px); 
    max-width: 600px; 
    background-color: #ccc; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    border-radius: 6px; 
    border: 0; 
} 

Answer 1

Вам необходимо отделить свой элемент наложения и контейнер электронной почты. Итак, для этого.

Ваш HTML:

<div class="email_container"></div> 
<div class="email_overlay"></div> 

Тогда на вашем CSS:

.email_overlay { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background-image: url(img/overlay_bg.png); 
    z-index: 1; 
} 

.email_container { 
    width: calc(100% - 20px); 
    max-width: 600px; 
    background-color: #ccc; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    border-radius: 6px; 
    border: 0; 
    z-index: 2; 

}