该文章总结自张鑫旭慕课，以及自己的使用经验和建议。
relative的具体作用
-
relative限制absolute- 限制偏移（绝对定位根据相对定位元素进行偏移）
- 与
overflow: hidden截断隐藏超出部分（如果没有relative的overfloww:hidden对于绝对定位的元素失效） -
relative会影响本身有z-index属性的绝对定位元素（如果a元素的z-index: 1;,b元素的z-index：3；，此时a在b下面，假如a的父元素有[relative]的z-index: 3，而b父元素有[relative]的z-index：2，不管a和b元素的z-index如何，a元素始终高于b元素。）
-
relative与定位- 相对自身定位
- 无侵入，不影响文档流(跟
margin比较一下) -
top下bottom失效，left下right失效 - 设置
relative元素的图片会盖过没有设置relative的图片（用margin-left: -xxpx试一下就知道了）
-
新建层叠上下文与层级控制
上面讲的
relative影响层级情况就是新建层叠上下文的原因，又在上面的基础上衍生出这些情况。- 如果
b元素的带有relative的父元素的Z-index设置为auto时，此时父元素的relative不再对子元素的z-index有限制作用，所以此时b的z-index变成3（层叠上下文不存在），此时b便会超过a - 但是这种情况不限于
ie6&ie7，因为ie6&ie7的z-index: auto也会出现新建层叠上下文，此时也就是说a依旧是比b高的。（这是bug）
- 如果
应用
为了避免relative覆盖，有下面两个经验应用
避免使用
relative（绝对定位不依赖于relative，具体看绝对定位一节）-
relative最小化
把img定位在左上角,一般的做法是<div style="position: relative;"> <img style="position: absolute; top: 0;left: 0;"> <div></div> <div></div> <div></div> <div></div> </div>这里会出现的问题就是很可能会因为父级的relative出现层级覆盖。
现在可以这样子做：
<div> <div style="position: relative;"> <img style="position: absolute; top: 0;left: 0;"> </div> <div></div> <div></div> <div></div> <div></div> </div>以上， 便是实现relative最小化，这里面的div进行相对定位以后并不会对布局造成任何影响。
