将弹出框设置为固定位置

Question

我对HTML和CSS工作相当陌生，但在像这样的论坛的帮助下，我已经走了这么远，我感到非常自豪。首先，谢谢大家!

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

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

我读过很多关于使用position:fixed属性的文章，并尝试过这样做，但没有成功(尝试过用一个简单的div包围colorbox，并设置"position:fixed")。另外，在浏览各种评论时，似乎应该谨慎使用固定位置，如果有的话。

有没有人有一个div的建议，我可以创建保持在屏幕上的颜色盒定位在任何时候?或者是另一种想法，比如阻止用户向下滚动原始页面的灰色区域?

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

如有任何建议，我将不胜感激。谢谢你！

Answer 1

问题是Colorbox Javascript将内联样式附加到框中，这将覆盖外部或内部CSS。给你的属性值!important优先级

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