上下滚动时颜色框移动

Question

在我的颜色框代码中，这是默认的 CSS 代码：

#colorbox, #cboxOverlay, #cboxWrapper{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
}

在这种情况下，颜色框显示在页面的中心，但在上下滚动时不会移动。但是，当我将代码更改为：

#colorbox, #cboxOverlay, #cboxWrapper{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
}

上下滚动时颜色框会移动，但不会显示在页面中心。如何结合这些效果？

Answer 1

使用类似的方式设置颜色框的宽度、高度和偏移量：

#colorbox, #cboxOverlay, #cboxWrapper{
    position:fixed;
    top:50%;
    left:50%;
    z-index:9999;
    overflow:hidden;
    width: 500px; //set the width
    height: 500px; // set the height
    margin-left: -250px; // negative offset to center the element
    margin-top: -250px // negative offset to center the element
}

在这里，您将top 和left 的位置设置为50%，将width 和height 设置为500px，然后将元素偏移一半使用负边距的宽度和高度（因为位置从左上角开始）

Fiddle