用css的四维运算定位position:fixed盒子在自适应宽度下的位置

上官雨伦

    一开始只是抱着试试看的心态做一下测试，没成想真的成功了。


    原理也很简单，首先，因为父级是最大的框架，也就是宽度100%。如果这时直接给left: 1px，那么它的起点则是浏览器的最左侧，那这里又涉及到了屏幕分辨率的问题。所以这里不能直接给一个固定的数值。
    那么这里就换一个思路来解决这个问题。既然我们需要这个侧边导航紧贴着中间框架的左侧。
   首先，先用100%的宽度减去中间框架的宽度，得出剩余空白处的宽度和。即：calc(100% - 980px)
    其次，我们将这个宽度和除以2，得出一边空白的宽度。即：calc(calc(100% - 980px) / 2)
    这时的侧边导航已经和中间的框架在最左处重叠了。
    最后，我们给它减去侧边导航的宽度，它的位置就紧贴着中间的框架了。即：calc(calc(calc(100% - 980px) / 2) - 105px)