css - 将弹出框设置为固定位置

Question

我对 HTML 和 CSS 工作相当陌生，但我对在像这样的论坛的帮助下取得的进步感到非常自豪。首先，谢谢您!

我的问题:我在我的网站上使用 Colorbox，它在当前页面顶部显示一个弹出窗口。问题是，如果我用鼠标滚轮滚动并且指针停留在灰色区域(我打开颜色框的原始页面)，则原始页面向下滚动......从而最终将颜色框移出屏幕。

我想要的是无论用户如何滚动，颜色框始终在屏幕中间可见。摆脱它的唯一方法就是关闭它。

我读过很多关于使用position:fixed属性的内容，并尝试这样做但没有成功(尝试用一个带有“position:fixed”设置的简单div围绕颜色框)。另外，在查看各种评论时，似乎应该谨慎使用固定位置(如果有的话)。

有人对我可以创建一个 div 来让颜色框始终位于屏幕上有建议吗？或者也许有一个替代的想法，比如阻止用户向下滚动原始页面的灰色区域？

这是一个link到显示问题的页面。如果您单击数十个示例故事链接之一，您将看到出现的颜色框。当它出现时，开始向下滚动原始页面，您会看到该框最终从屏幕上消失。

如果有任何建议，我们将不胜感激。谢谢!

Answer 1

问题在于 Colorbox Javascript 将内联样式附加到框中，这将覆盖外部或内部 CSS。为您的属性值指定!important的优先级。

#colorbox {
    outline: 0 none;
    position: fixed !important;
    top: 10% !important;
}