Question

我有一个名为Lightbox的固定位置 DIV 。我的问题是当我滚动内容时，关闭按钮不会保持在右上角。

如何实现关闭按钮保持在右上角？

＆＃13;

.lightbox {
    position: fixed;
    background: white;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    margin-left: -300px;
    margin-top: -200px;
    z-index: 10000;
    overflow-y: auto;
}
.close-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: black;
    color: white;
    font-weight: bold;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    text-align: center;
}
.item {
    width: 250px;
    display: inline-block;
    border: 1px solid blue;
    height: 300px;
    background: lightblue;
}

＆＃13;

<div class="lightbox">
    <div class="close-btn">x</div>
    <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
    </div>
</div>

＆＃13;

Answer 1

使项目div可滚动而不是灯箱，然后关闭按钮将保持绝对位于右上角。

这是我改变的CSS：

.lightbox {
    overflow: hidden;
}

.close-btn {
    top: 5px;
    right: 20px;
}

.items { 
    width: 600px;
    height: 400px;
    overflow-y: auto; 
}

JSFiddle： http://jsfiddle.net/dgw8tj5r/4/

Answer 2

您可以通过调整HTML并为lightBox内容添加容器来为lightBox div创建一个粘滞按钮：

<div class="lightbox">
    <div class="close-btn">x</div>
    <div class="container">
        <div class="items">
            <div class="item">Item</div>
            <div class="item">Item</div>
            <div class="item">Item</div>
            <div class="item">Item</div>
        </div>
    </div>
</div>

然后在.lightbox上添加宽度，高度和溢出属性，而不是.container div。

.container{
    overflow-y: auto;
    width: 600px;
    height: 400px;
}

现在您的close-btn将不会包含在滚动部分中。

JSFiddle demo

编辑：本杰明的答案是一个更高效的版本，因为你实际上已经有一个包含div：.items。您可以使用它而不是添加新的。

Answer 3

在合适的位置画出灯箱 2.在灯箱内添加关闭按钮和容器，并在需要的位置关闭按钮位置。 3.最终在容器内添加了项目。

就是这样。

感谢。

修正了

<div class="lightbox"><div class="close-btn">x</div>
    <div class="lightboxdv">
    <div class="items">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
    </div>
    </div>
</div>

.lightbox {
    position: fixed;
    background: white;
    top: 50%;
    left: 50%;
    border: 1px solid black;
    margin-left: -300px;
    margin-top: -200px;
    z-index: 10000;
    overflow:hidden;    
}

.lightboxdv{
    width: 560px;
    height: 400px;
    overflow-y: auto;
}

.close-btn {
    position: absolute;
    top: 0;
    right: 20px;
    background: black;
    color: white;
    font-weight: bold;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    text-align: center;
}

.item {
    width: 250px;
    display: inline-block;
    border: 1px solid blue;
    height: 300px;
    background: lightblue;
}

Answer 4

您需要做的就是将.close-btn位置更改为固定。

.close-btn {
    position: fixed;
}

我希望它有效！

相对于固定父级固定的位置

4 个答案: