绝对定位元素宽高分析
update[2015-02-02]: 在理解了containing block这个概念之后，发现这篇文章好水，但是人都是慢慢进步的嘛，所以还是留着好了~一直以来对绝对定位元素没有太多了解，上周五下午测试的时候发现绝对定位元素在使用100%宽高的时候占据的不仅仅是父元素的宽高，还包括父元素的padding，这么说比较抽象，咱直接上demo吧。
See the Pen dimension of absolute positioned element by Bane Lee (@zenoven) on CodePen.
说明：
- .sub为绝对定位，多数.wrap为相对定位；
- .sub2有边框，.sub3有padding，.sub4有边框也有padding；
- .block1 中的.sub没有设置宽高；
- .block2/3中的.sub用百分比设置宽高；
- .block4/5中的.sub用left/right/top/bottom来设置宽高；
- .block6/7中的.sub用固定px值设置宽高；
- .block2和.block3对比，区别在于.block3的定位及.block3 .wrap的定位；
- .block4和.block5对比，区别在于.block5的定位及.block5 .wrap的定位；
- .block6和.block7对比，区别在于.block7中.sub设置overflow visible；
- 测试环境为Mac OS X 10.9.5，Chrome 38.0.2125.101 / Firefox 32.0.3，WIN8虚拟机下测试了IE8-11。
通过对比以上的输出，对绝对定位元素可以得出如下结论：
- 宽高计算参考对象是其最近的设置为relative的父元素为参考对象，如.block2和.block3的对比；
- 在没有设置宽高时根据其内容自适应，如.block1；
- 在用百分比计算宽高时，要加上参考对象的padding，.sub 宽/高 = (参考对象宽/高 + padding-left + padding-right) * 百分比，如.block2；
- 在用left/right/top/bottom设置宽高时，.sub 宽/高 需要减去.sub的border和padding，如.block4；
- 在用固定的px值设置宽高后，border、padding无影响，即.sub宽/高 = 设置的宽/高，如.block6；
- 在用固定的px值设置宽高后，即使设置overflow: visible 也无效，如.block6和.block7对比。
啰嗦的挺多，其实也蛮简单的就1和3这两条，以closest relative的对象作参考，百分比算宽高时参考对象的padding要计算在内，其他的几条都是细节性的东西仔细想下就明白了。
如有纰漏，欢迎指正~