10/7
2015
标题可能看的有点晕，其实就是说一个div距离页面左侧的位置可能会变动，那如何让fixed定位的元素和它保持固定的距离呢？
看如下代码：
<div class="box">
<div class="box1"></div>
<div class="box2">从这里开始是box2的内容部分，左边是内边距</div>
</div>
<style>
body{margin: 0;}
.box{width: 810px;margin: 0 auto;}
.box1{ width:600px; height:2000px; background-color:#3F0;}
.box2{ width:400px; height:200px; background-color:#930; position:fixed;top: 0;right: 0;bottom: 0;left: 0;margin: auto;padding-left: 810px;color: #fff;}
</style>
最外层box宽810px，始终水平居中。然后box1宽600px，在外层box里面居左。box2是固定定位position:fixed，想让box2在外层box里面居右，而且和box1有10px的间距。
这时候问题来了，box2是固定定位，而不是相对定位或绝对定位。固定定位是始终相对于窗口定位的，而不是相对于父元素。如果给box2一个固定的left值，窗口宽度一旦改变，外层box距页面的水平位置改变了，box2却保持不变，这就和box1错位了。
然后我去百度，看到有篇文章说的是把固定定位的元素设置居中。我隐约觉得破解这个问题的契机出现了，试了一会儿，终于找到了方法，那就是不使用left定位，而是使用padding或border去挤。
先把fixed定位的元素居中，然后用padding-left或border-left去挤（推荐用用padding-left），其宽度等于外层box的宽度（不能用margin-left，因为它要用来设置居中）。这样，当页面宽度改变时，box2相对于外层box的位置是不变的，也就不会和box1错位了。
但是这样也有缺陷：
第一，fixed的元素因为加了padding或border，实际宽度增加了。如果窗口宽度小于这个宽度，平衡就会被打破。
第二，padding和border都是可见元素，所以fixed定位的元素不要设置背景色和边框，否则在视觉上会影响页面。要设置的话在元素内建立子元素来做。
现在想想有点意思，和《绝对定位的元素居中》的方法有相似之处。只不过固定定位的是把元素居中，而绝对定位是把元素左侧居中。然后都是去挤了。
