Question

我有一个位置固定的<div>，里面装满了内容。内容是可滚动的，但是我想为此<div>创建一个“关闭按钮”，该按钮始终粘在右上方。这是HTML代码：

<div id="job_edit_content">
            <div id="job_edit_contentheader">

                <div id="job_edit_close" onClick="job_edit_close()">
                <span class="glyphicon glyphicon-remove"></span>
                </div>

            </div>
</div>

这里有CSS：

#job_edit_content {
    position: fixed;
    width: 80%;
    height: 80%;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    margin: auto;
    font-family: 'Josefin Slab', serif;
    background-color: #659DBD;
    color: #FFF;
    text-align: left;
    display: none;
    z-index: 101;
    border-radius: 12px;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    overflow-y: auto;
}
#job_edit_contentheader {
    position: relative;
    width: 100%;
}
#job_edit_close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 20px;
    font-size: 20px;
    cursor: pointer;
    z-index:102;
}

但是关闭按钮不会粘在右上角。它始终随内容滚动。我也尝试了粘性定位，结果相同。有人可以解释一下为什么吗？

Answer 1

将位置设为“绝对”，而不是“固定”。如果您放置一个Codepen或某种复制方式，我可以演示。

将固定位置的div嵌套在固定位置的div中

1 个答案: