Jquery 可滚动弹出div中的绝对/固定元素

我有一个按钮，点击后会显示弹出框。弹出窗口需要放置在

绝对位置

或

固定位置

，以避免干扰网站内容（如果有人写入，则父对象的位置必须是相对位置）

在弹出窗口中，我有一个列表，如果不在框边界内，该列表将可滚动

在右上角，我希望有一个“关闭”按钮，无论滚动如何，该按钮都将保持粘贴在方框的角落。不幸的是，它没有，它与内容一起滚动

HTML:

正如您所见，我试图欺骗它，并使用

position:relative

添加额外的div，以使“X”按钮按预期的方式工作，但这没有奏效

有什么办法让它工作吗？我知道我可以使用jQuery并根据弹出的偏移量给出“X”按钮的位置：固定的坐标，但我希望是纯CSS的解决方案

---

这里是

所以，这里发生的是A）你没有实际设置任何与元素实际位置相关的内容，B）你设置的内容不正确，C）你把close元素放在可滚动区域内…这就是…为什么它会滚动

但是别担心！我们可以解决这个问题

标记

<div class="outer">
    <div class="close">X</div>
    <div class="relative">
        <div class="inner">
            <li>test</li>
            <li>test</li>
            ...
            <li>test</li>
        </div>
    </div>
</div>

这到底是怎么回事

首先，我们将

.close

元素移到可滚动区域之外，这样is就可以在模式中正确地定位自己。这让我们更接近了，但我们仍然要担心一些棘手的部门倒闭问题

嗯…我说讨厌，但我的意思是期待…嗯…我说期待，但我的意思是讨厌

在父对象内放置/浮动元素时，它会折叠该父对象。这包括

和

元素。所以，我们首先要做的是通过给它们一个定义的大小来取消它们的折叠。我们希望它们与窗口大小相同，因此将它们设置为100%的高度和宽度就可以了

现在我们有了一个参考点来定位其他元素。模式设置为固定，因此它相对于窗口的位置。我们将宽度和边距设置为%，因为这样做很酷

然后，我们将模态内容的主容器设置为relative，以便该元素的任何子元素都将根据其位置自行修复。我们通过将他们设置为绝对并给他们坐标来告诉他们去哪里

设置溢出，设置宽度，给

一个好的cat图片背景和BADA-BOOM-BA！一个光滑的CSS样式的模态窗口为您服务

---

ALLONS-Y

使用

高度

自动

我认为这是不可能的，相反，你可以给出固定高度，然后尝试，或者如果你想给出100%的浏览器高度，你可以使用jquery或javascript

演示-

.outer{
位置：绝对位置；
宽度：98%；
边框：1px纯红；
}
.亲戚{
位置：相对位置；
}
.内部{
高度：200px；
溢出y：滚动；
}
.结束{
位置：绝对位置；
顶部：10px；
右：10px；
}

X
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

使用

高度

自动

我认为这是不可能的，相反，你可以给固定高度并尝试，或者如果你想给100%的浏览器高度，你可以使用jquery或Javascript。如果你想获得

窗口的全部
高度
，非常感谢，添加固定高度成功了。我没有把固定高度放在小提琴上，因为我不知道这会引起问题，而在我的网站上，我使用jquery动态更改容器的高度。tPlummer解决方案也很有效，但我一直在寻找您提出的解决方案，所以如果您能发布您的解决方案，我很乐意投票。非常感谢您的回答，非常有教育意义，尽管我的问题远没有那么先进，但基本上我的容器在css中没有固定高度这一事实。我不知道这会导致问题，否则我会提到我的容器css.height正在被jquery脚本更改。谢谢你的时间和努力，我很感激！没问题。这个答案涵盖了固定高度，但方式不同。我要警告您，在响应性设计方面，使用jquery更改属性并不是处理维度的有效方法。祝你好运
.outer {
    position: absolute;
    width: 98%;
}

.relative {
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
}

<div class="outer">
    <div class="close">X</div>
    <div class="relative">
        <div class="inner">
            <li>test</li>
            <li>test</li>
            ...
            <li>test</li>
        </div>
    </div>
</div>

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: url('http://www.catster.com/files/original.jpg');
}
.outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    margin: 5%;
    background: rgba(255,255,255,0.75);
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.relative {
    position: relative;
    width: 100%;
    height: 95%;
    top: 5%;
    left: 0;
}
.inner {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
}