javascript - 如何使用 "position:fixed"将 img 固定到弹出式 div？

Question

所以我有一个 div，其格式基本上是我网站上的“弹出窗口”。所以在网站上，你可以滚动。但是当你点击一个图标来触发弹出窗口时，弹出窗口本身将允许滚动(并且网站的滚动将被禁用)。但是现在我有一个“关闭”按钮的图像，我想把它固定在这个 div 上(并且只在这个 div 上)的某个位置。我将如何做到这一点？在显示弹出窗口之前，我根本不希望关闭图像出现，并且在关闭弹出窗口时它会消失。目前，我正在使用“position:absolute”，它只显示弹出窗口，并在弹出窗口关闭时消失。但是用户必须向上滚动才能再次看到关闭按钮。

Answer 1

fiddle Here

在这种情况下使用绝对位置是个好主意。关键是要确保关闭按钮不在可滚动 Pane 内，而是与包装器处于同一级别。

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;
}