relative其實(shí)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，主要是用來(lái)限制absolute這個(gè)想必大家都是會(huì)用的，先不談，然后relative定位上有兩個(gè)特性：1. 相對(duì)自身 2.沒(méi)有侵入性
我們1在使用的時(shí)候要堅(jiān)持 relative最小化影響的原則，也就是盡量不使用relative，如果必須要用的話(huà)，就讓他的影響變得最小。
1. relative與定位：
先說(shuō)兩個(gè)特性：
相對(duì)自身，這里說(shuō)的就是relative的left top之類(lèi)的屬性是在自己的位置上進(jìn)行修改的，
無(wú)侵入性：但是即便是調(diào)整了位置，也不會(huì)干擾周邊元素的布局，所以沒(méi)有侵入性，這個(gè)應(yīng)該可以理解，畢竟超出了文檔流，但是還留了一個(gè)殼子站位
-
相對(duì)包含塊的百分比，雖然位置的改變是在本來(lái)位置上進(jìn)行調(diào)整的（位移是相對(duì)于自身的），但是如果left riht的值是百分比的話(huà)，他們就是相對(duì)于包含塊進(jìn)行調(diào)整的。同時(shí)，如果包含塊的高度是0那么，bottom還有top的計(jì)算值就都是0
也就是說(shuō)，如果包含塊的height:auto 那么，top:10%就相當(dāng)于top:0;
相對(duì)定位的left 和right同時(shí)出現(xiàn)的時(shí)候，顯示和文檔流的方向有關(guān)系，默認(rèn)的文檔流是自上而下，從左往右的。top/bottom一起出現(xiàn)的時(shí)候，bottom會(huì)被干掉。left/right同時(shí)出現(xiàn)的時(shí)候，right斃命
2、relative的最小化影響原則
兩點(diǎn)
盡量不使用relative如果想定位某些元素的話(huà)，看看能不能使用“五一來(lái)的絕對(duì)定位”
-
場(chǎng)景受限，必須使用relative的時(shí)候，relative最小化。
<div class="point11"> <div class="box" style="position:relative;"> <img src="./img/hot.gif" style="position:absolute;right:0;top:0px;" alt=""> <p>內(nèi)容1</p> <p>內(nèi)容2</p> <p>內(nèi)容3</p> <p>內(nèi)容4</p> <p>內(nèi)容5</p> </div> </div> <div class="point12"> <div class="box" style="position:relative;"> <div style="position:relative;"> <img src="./img/hot.gif" style="position:absolute;right:0;top:0px;" alt=""> </div> <p>內(nèi)容1</p> <p>內(nèi)容2</p> <p>內(nèi)容3</p> <p>內(nèi)容4</p> <p>內(nèi)容5</p> </div> </div>
我們?nèi)绻胗疑辖秋h一張圖片的話(huà)，我們還是推薦上第二種方式，主要是刪除的時(shí)候可以直接刪了，但是如果是第一種呢，你不知道relative會(huì)不會(huì)影響本來(lái)的z-index之類(lèi)的，或則他一不小心覆蓋了其他的層級(jí)，那么就需要把另一個(gè)元素也變成relative，這樣冤冤相報(bào)何時(shí)了。。。所以還是要使用最小化原則。
3、fixed
他的包含塊是html,所以relative對(duì)fixed毫無(wú)約束力。
基本的用法我們都知道了，此處不做講解，其他地方有各種各樣的講解。
我們說(shuō)一下無(wú)依賴(lài)的固定定位，也就是利用fixed沒(méi)有設(shè)置lef/top/right/bottom的相對(duì)特性，可以將目標(biāo)元素定位到我們想要的位置，用法比較簡(jiǎn)單，略了
