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>

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