定位详解(二) Overconstrained

2.2 绝对定位

前面一篇文章我们提到了 如果加入了right bottom width 的限制?

也就是我们的绝对定位元素声明了尺寸，而且left top 是显式声明了的值，另外两个时auto，这时怎么处理？

先看非替换元素

非替换元素的放置和大小

一般地，元素的大小和位置取决于其包含块。 各个属性的值都会有影响，不过最主要还是其包含块~！

考虑一个定位元素的宽度和水平放置。 可以表示为一个等式：
left+ margin-lelft + border-left-width + padding-left +width + padding-right + border-right-width + margin-right +right = containing block(包含块)的width

基本上会由这个等式确定正常流中块级元素的大小~ 除非增加了left 和right

这些属性有之间有什么关系呢？

1)如果left width right设置为auto，就会得到上一节的结果(width设置为auto和不设置width)：
左边界置于其静态位置。 右边界也是置于其静态位置。 width设置为“收放得正好合适”。
这说明元素的内容区宽度恰好只能包含其内容没有多余空间。
2）left和right其中一个是auto，另一个不是
position:absolute;top:0;left:0;right:auto;width:auto;

非静态属性要适当设置，以保证余下的距离。元素的顶端根据其包含块的顶端设置，元素的宽度恰好包含内容。 从元素的右边界到包含块右边界之间余下距离就是right的计算值。

3)假设左右margin都是auto， left，width，right不是auto

position:absolute;left:1em;top:0;right:1em;width:10em;margin:0 auto;

那么此时左右外边距就会设置为相等的值

使得这个元素在包含块中居中！
这与在正常流中居中的行为是一样的。

4) 假设margin不是auto了
Overconstrained!

position:absolute;top:0;left:1em;right:1em; width:10em; margin-left:1em;margin-right:1em;

因为对span来说
left+ margin-left +width +margin-right +right =14 em
但是containing block 包含块是 25em ，所以还差11em。
规则： 这就会使得浏览器 忽略 right的值(从左往右的语言)。
然后重置right的值！！！！！！！！
结果就变成：

position:absolute;top:0;left:1em;right:12em; width:10em; margin-left:1em;margin-right:1em;

5) 如果某个margin保持auto，那么规则就会改变这个margin，而不是偏移(left top right这些)。

position:absolute; top:0;left:1em;right:1em;wdith:10em;margin-left:1em;margin-right:auto;

实际margin-right就是 12em了。。 所以这些没有对任何值进行重置，只是把设置为auto的值设置的更合理。
重置是发生在没有auto的情况下~~~~

6) 如果margin-left是auto

position:absolute; top:0;left:1em;right: