css-absolute relative float 之 relative

重要知识点：

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,这样的好处是，可以避免对其他的元素造成层叠影响

 

 

 

 

　　

转载于:https://www.cnblogs.com/poorpeople/p/6519302.html