css实现网页缩放时固定定位的盒子与版心一同缩放

　　在网页设计过程中我们可能会出现这种情况：设置好一个固定定位的盒子，但是当网页缩放时固定定位的盒子与网页的版心分离

　　

 

 　　

 

　　

 　　这是因为css定位中的固定定位是以页面为参照进行定位的，而不是以版心盒子为参照，那么我们如何解决这个问题，实现让固定的盒子以版心为参照，在缩放时随版心一同缩放呢？

　　此时，我们可以先让固定定位的盒子以网页的中心为参照，再利用 margin 移动距离，即可实现网页缩放时随版心一同缩放，这里以左边的固定定位盒子为例

　　

<style>
    .fixed_box {
        /* 为了方便将宽高先写上 */
        width: 130px;
        height: 150px;
        position: fixed;

        /* 实现垂直居中 */
        top: 50%;
        margin-top:  -75px;

       /* 将固定定位的盒子定位到网页中线 */
        left: 50%;

        /* 将盒子定位到网页中线之后，向左移动版心宽度的一半加上自身的宽度，即可与版心对齐 */
        margin-left: -750px;

        /* 注：这里假设版心宽度为1200px，如果想被固定的盒子和版心之间有间隙的话还可以添加宽度，比如这里在版心和固定的盒子之间有 20px 的宽度 */
}

</style>

 

　　我们来看效果（这里只设置和左边盒子，和右边盒子形成对比）：