在網頁設計過程中我們可能會出現這種情況：設置好一個固定定位的盒子，但是當網頁縮放時固定定位的盒子與網頁的版心分離
這是因為css定位中的固定定位是以頁面為參照進行定位的，而不是以版心盒子為參照，那么我們如何解決這個問題，實現讓固定的盒子以版心為參照，在縮放時隨版心一同縮放呢？
此時，我們可以先讓固定定位的盒子以網頁的中心為參照，再利用 margin 移動距離，即可實現網頁縮放時隨版心一同縮放，這里以左邊的固定定位盒子為例
1 <style> 2 .fixed_box { 3 /* 為了方便將寬高先寫上 */ 4 width: 130px; 5 height: 150px; 6 position: fixed; 7 8 /* 實現垂直居中 */ 9 top: 50%; 10 margin-top: -75px; 11 12 /* 將固定定位的盒子定位到網頁中線 */ 13 left: 50%; 14 15 /* 將盒子定位到網頁中線之后，向左移動版心寬度的一半加上自身的寬度，即可與版心對齊 */ 16 margin-left: -750px; 17 18 /* 注：這里假設版心寬度為1200px，如果想被固定的盒子和版心之間有間隙的話還可以添加寬度，比如這里在版心和固定的盒子之間有 20px 的寬度 */ 19 } 20 21 </style>
我們來看效果（這里只設置和左邊盒子，和右邊盒子形成對比）：
