css relative
一、relative和absolute相煎关系
relative限制absolute
1、限制left/top/right/bottom定位
如果父元素有relative，只能根据父元素进行定位
2、限制z-index层级
如果relative有z-index，absolute的z-index失效
3、限制在overflow下的嚣张气焰
overflow:hidden是防止不了absolute的溢出的。但是配合relative的overflow是可以防止溢出的
relative限制fixed: 只能限制z-index层级
二、relative和定位
两个特性
1、相对自身
left:0,top:0相对自身。其实就是纹丝不动。
relative配合margin定位
<style> div{ width: 300px; height: 50px; background: #eee; margin-top:20px; } </style> <body> <div></div> <div style="position:relative; margin-top:-30px; background: red;"></div> <div></div> </body>
后面的元素会跟上去，若不是margin-top，而是top
<style> div{ width: 300px; height: 50px; background: #eee; margin-top:20px; } </style> <body> <div></div> <div style="position:relative; top:-30px; background: red;"></div> <div></div> </body>
第三个元素纹丝不动。
2、无侵入
不会影响其他布局，自己怎么定，其它元素纹丝不动
应用：自定义拖拽
3、top/bottom和left/right对立属性同时存在时的表现是？
绝对定位是拉伸，相对定位是斗争。怎么斗争。如果先设置了top，bottom无效。如果先设置了left，right无效
<style> div{ width: 300px; height: 50px; background: #eee; margin-top:20px; } </style> <body> <div></div> <div style="position:relative; top:-30px; bottom:30px; background: red;"></div> <div></div> </body>
执行的是top:－30px。先设置者优先，而不是覆盖。
三、relative和层级
1、提高层迭上下文
在没有其它外力作用下，一般都是后面的元素覆盖前面的。但是想前面的上前。前面的配合z-index就能起作用。单独的z-index是无效的
2、新建层叠上下文与层级控制
relative+z-index:auto，不会限制absolute，默认是auto的（不包括ie6,7）
四、relative的最小化影响准则
尽量降低relative属性对其他元素或布局的潜在影响！
1、在可以单独使用absolute解决问题的时候,不要使用relative,如有偏差,可以配合margin使用
2、一定要使用relative的时候,要保证作用范围最小化
