重要知识点：
1 relative对absolute
1、限制left/top/right/bottom定位
2、限制z-index层级 (absolute的z-index越大就越高，但有relative在外面有具体得z-index数值除auto，就会超越absolute的层级)
3、限制在overflow下 （老二超过老大地盘会被裁剪）
2 而relative对fixed的限制：
限制z-index层级；
3 定位
（1）absolute相对边界，relative相对自身定位，如果是top：0，left：0.则其位置不变。
（2）无侵入作用
即他不会影响其他元素的布局，比如说：如果是margin-top：-100px；移走后，紧接着这个div的div也会向上移动；如果是top:-100px，则不会，后面的元素会保持不动
（3）同时设置对立属性--top、bottom或者left、right
1、absolute表现为拉伸
2、relative表现为只有top和left生效
4 层级
1. 提高层叠上下文
页面有两张图片出现层叠情况，默认后一张图片层叠前一张，如果设置前一张图片position：relative，则前一张会层叠在前
2. 新建层叠上下文与层级控制
父级设置了relative，限制子级的层级
如果父元素的z-index：auto，就不会限制子级的层级，但是不包括IE6/IE7（因为IE6/IE7在z-index：auto情况下仍然会创建层叠上下文，不符合规范）
5 最小化原则
尽量降低relative属性对其他元素或布局的潜在影响
relative最小化 只需给需要绝对定位的元素添加有一个空div，这个div relative,这样的好处是，可以避免对其他的元素造成层叠影响