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

Question

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

如何实现关闭按钮一直在右上角？

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

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

Answer 1

您可以通过稍微调整 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>

然后在这个新 .container.

上添加宽度、高度、溢出属性，而不是 .lightbox div

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

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

JSFiddle demo

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

Answer 2

在适当的位置绘制灯箱。
2.Add 灯箱内的关闭按钮和容器以及您需要的关闭按钮位置。 3.Finally 在容器内添加了项目。

就是这样。

谢谢。

已修复

<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 3

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

.close-btn {
    position: fixed;
}

希望有用！

Answer 4

使项目 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/

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

Position fixed relative to fixed parent

html

css

css-position