带偏移量的绝对定位

参考张鑫旭慕课网CSS的absolute课程：https://www.imooc.com/learn/192

1.absolute的特性与偏移量

1.1 偏移量

 1. 四个方向的偏移量一般组合使用，水平方向的一个与垂直方向的一个。

 2. 当只使用水平方向或者垂直方向时，那么另一个方向将仍受到普通文档流的影响。比如只有top:10px;那么水平方向需要用margin-left或者margin-right定位。

 3.当为绝对定位元素使用偏移量时，其包含块将会限制绝对定位元素的区域，比如left:0;top:0;放在包含块的左上角。而包含块是离绝对定位元素最近的定位性质的元素（参照物）的padding box，如果没有这样的参照物，则参照物为初始包含块。

1.2 绝对定位元素的“拉伸”

1. 当为绝对定位元素使用相互对立的偏移量时，结果不是瞬间位移，而是“身体的爆裂拉伸”，实现相应方向的自适应布局。这种绝对定位对立偏移量的拉伸特性，兼容性IE7+

2.绝对定位的偏移量与width、height可以相互替换。

• 比如left:0; right:0;等价于left:0;width:100%;也就是铺满包含块的宽度。
• 比如top:0; bottom:0;等价于top:0;height:100%;也就是铺满包含块的高度。
• 比如left:0;width:50%;等价于left:0;right:50%;
• 比如left:100px;right:0;相当于实现了一个距离左侧固定100px，右侧自适应的容器。
• 比如left:0;right:200px;相当于实现了一个距离右侧固定200px，左侧自适应的容器。如果不使用right，那么可以用CSS3的calc()函数，等价于left:0;width:calc(100%-200px); calc()函数的兼容性不是很好，只有限带浏览器才支持，使用拉伸只要IE7+即可。

3.当拉伸与width、height同时出现时，最终的效果由width、height决定

• 比如left:0;right:0;width:50%;最终的宽度为50%，而不是100%
• 比如top:0;bottom:0;height:30%;最终的高度为30%，而不是100%

4.如果拉伸、尺寸限制与margin的auto同时出现时，会有绝对定位元素的绝对居中效果，这个特性兼容性IE8+。（见2.3节的示例）

• 比如left:0;right:0;width:50%;margin:0 auto;</