你如何使用「位置：固定」來修復一個img到彈出div？

Question

所以我有一個格式化爲本質上是我的網站上的「彈出」的div。所以在網站上，你可以滾動。但是當你點擊一個圖標觸發彈出窗口時，彈出窗口本身將允許滾動（並且網站的滾動將被禁用）。但是現在我有一個「關閉」按鈕的圖像，我想將它固定在此div上的某個位置（並且僅限於此）。我怎麼做到這一點？我不想讓關閉的圖像顯示出來，直到顯示彈出窗口，並且在關閉彈出窗口時它會消失。目前，我正在使用「position：absolute」，它只顯示彈出窗口，並在彈出窗口關閉時消失。但用戶必須再次滾動才能看到關閉按鈕。

Answer 1

小提琴Here

使用絕對位置是在這種情況下是個好主意。關鍵是確保關閉按鈕不在可滾動窗格內，但與包裝器位於同一層。

HTML

<div class="popup"> 
    <div class="popup-content-wrap"> 
     <div class="popup-content"></div> 
    </div> 
    <div class="close">close</div> 
</div> 

CSS

.popup { 
    position: fixed; 
    background-color: blue; 
    left: 50px; 
    right: 50px; 
    bottom: 50px; 
    top: 50px; 
} 
.popup-content-wrap { 
    height: 100%; 
    width: 100%; overflow: auto; 
} 
.popup-content { 
    height: 1000px; 
} 
.close { 
    position: absolute; 
    bottom: 20px; 
    right: 20px; 
}