将弹出框设置为固定位置

Question

我对 HTML 和 CSS 工作还很陌生，但我为自己在这样的论坛的帮助下取得的成就感到非常自豪。所以首先，谢谢你！

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

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

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

有没有人对我可以创建一个 div 以使颜色框始终位于屏幕上的建议？或者可能是另一种想法，比如阻止用户向下滚动原始页面的灰色区域？

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

任何建议都将不胜感激。谢谢！

Answer 1

问题在于 Colorbox Javascript 将内联样式附加到将覆盖外部或内部 CSS 的框。优先考虑您的属性值!important。

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