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设置为{{ 1}}，然后使用负边距将元素偏移一半的宽度和高度（因为位置从左上角开始）

Fiddle

向上和向下滚动时，彩色框移动

1 个答案: