使覆蓋圖像固定，但內容容器可滾動

我的代碼創建一個疊加層，它用黑色阻止頁面，並且內部容器中有一個表單。當它處於活動狀態時，它會阻止頁面，但疊加層是絕對的，並且只將窗口寬度和高度拉伸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; 
}

來源

2015-04-24 HelpNeeder

你可以做讓你的父母覆蓋固定和應用'.quote_container，.email_container {overflow- y：auto; }'？ – scniro

似乎沒有工作。根本不會溢出，內部元素的底部總是被切斷。 – HelpNeeder

你能製作一個演示問題的小提琴/笨蛋嗎？不需要背景圖片 – scniro

您需要分開您的疊加元素和電子郵件容器。所以要做到這一點。

你的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;

}

來源

2015-04-24 23:39:39

哦，還不錯。這可能只是做。謝謝。 – HelpNeeder

使覆蓋圖像固定，但內容容器可滾動

回答

相關問題