該文章總結(jié)自張鑫旭慕課邮府，以及自己的使用經(jīng)驗和建議。
relative的具體作用
-
relative限制absolute- 限制偏移（絕對定位根據(jù)相對定位元素進(jìn)行偏移）
- 與
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失效 - 設(shè)置
relative元素的圖片會蓋過沒有設(shè)置relative的圖片（用margin-left: -xxpx試一下就知道了）
-
新建層疊上下文與層級控制
上面講的
relative影響層級情況就是新建層疊上下文的原因戴尸，又在上面的基礎(chǔ)上衍生出這些情況粟焊。- 如果
b元素的帶有relative的父元素的Z-index設(shè)置為auto時，此時父元素的relative不再對子元素的z-index有限制作用，所以此時b的z-index變成3（層疊上下文不存在）项棠，此時b便會超過a - 但是這種情況不限于
ie6&ie7悲雳，因為ie6&ie7的z-index: auto也會出現(xiàn)新建層疊上下文，此時也就是說a依舊是比b高的沾乘。（這是bug）
- 如果
應(yīng)用
為了避免relative覆蓋怜奖，有下面兩個經(jīng)驗應(yīng)用
避免使用
relative（絕對定位不依賴于relative，具體看絕對定位一節(jié)）-
relative最小化
把img定位在左上角,一般的做法是<div style="position: relative;"> <img style="position: absolute; top: 0;left: 0;"> <div></div> <div></div> <div></div> <div></div> </div>這里會出現(xiàn)的問題就是很可能會因為父級的relative出現(xiàn)層級覆蓋翅阵。
現(xiàn)在可以這樣子做：
<div> <div style="position: relative;"> <img style="position: absolute; top: 0;left: 0;"> </div> <div></div> <div></div> <div></div> <div></div> </div>以上歪玲， 便是實現(xiàn)relative最小化，這里面的div進(jìn)行相對定位以后并不會對布局造成任何影響掷匠。
