1.前言
在前面的兩篇文章：CSS深入理解之float浮動和CSS深入理解之absolute定位中，介紹了float和absolute的特性和使用方法，如果大家仔細閱讀完了這兩篇文章，相信你的CSS打怪技能又提高的一大截，那麼趁著自己最近狀態不錯，就多給大家分享點自己平時所學的技能。一方面對自己的技能能夠有一個總結，看自己到底理解透了沒有，另一方面，以文章的形式分享出來，悅己同時悅他人。好了，開始進入今天的主題，今天輪到另一個定位屬性登場了——relative，大家鼓掌歡迎???。
2.relative的特性
relative，顧名思義，相對。在CSS中，我們都這樣使用：position: relative，翻譯成中文就是相對定位。不知道大家在使用的過程中，有沒有想過這樣的一個問題：它到底是相對誰定位呢？在揭開答案之前，我們還是以例子來說明問題。
<!--HTML程式碼-->
<div class="box">
<div class="td">
<div class="element1"></div>
<h3>使用margin</h3>
</div>
<div class="td">
<div class="element2"></div>
<h3>使用relative</h3>
</div>
</div>
複製程式碼可以直接看核心CSS程式碼：
/*CSS程式碼*/
.element1{
margin-top: -30px;
}
.element2{
position: relative;
top: -30px
}
複製程式碼在瀏覽器中的效果如下：
在本例中，使用.element1和.element2兩個CSS類達到的效果不一樣，使用margin負值改變元素的位置後，後面元素的位置跟著變化，而使用position: relative和top負值改變元素的位置，後面元素的位置並沒有發生改變。其實，這個例子說明了relative定位的兩大特性：
1）相對自身。使用relative定位的元素，其相對的是自身進行偏移。
2）無侵入性。使用relative定位的元素，可以理解為產生了”幻影”，其真身依然在原來的位置上，所以並不會影響頁面中其他的元素的佈局。本例中，使用relative這幾個字依然在原來的位置上，而使用margin這幾個字則偏移了原來的位置。
3.relative的限制作用
3.1 relative對absolute的限制作用
我們知道，absolute定位的是其第一個祖先元素定位屬性不為static屬性，如果沒有relative或者fixed定位的情況下，給absolute新增top/left、right/bottom等屬性可以發生偏移，如下：
position: absolute;
top: 10px;
left: 10px;
複製程式碼此時，absolute元素就會迅速定位到局裡瀏覽器左側10畫素，頂部10畫素的地方。但是如果給父元素新增position: relative之後，則absolute的偏移能力被父元素限制住了，如下圖所示：
3.2 relative對overflow的限制作用
直接看下面的這個例子：
<!--HTML程式碼-->
<div class="box">
<div class="son"></div>
</div>
<div class="box" style="position: relative">
<div class="son"></div>
</div>
複製程式碼.box{
overflow: hidden;
width: 50px;
height: 50px;
background-color: #dddddd;
}
.son{
position: absolute;
width: 100px;
height: 100px;
background-color: #cd0000;
}
複製程式碼在這個例子中，.box的寬和高都是50px，而.son元素的寬和高都是100px，雖然.box元素設定了overflow:hidden，但依然限制不了.son元素的大小，其寬和高都是100px，而當.box設定了定位屬性relative後，.son元素的寬和高乖乖的變成了50px。如下圖所示：
3.3 relative對層級z-index的限制作用
設定了定位元素的z-index值為數值可以建立”層疊上下文”（在後面的文章中會講到）。在下面的第一幅圖中，設定了margin負值，雖然同時設定了z-index為數值，但是後面的元素依然覆蓋了前面的元素，而當增加了定位屬性position: relative後，建立了層疊上下文，前面元素的層疊順序高，雖然同時設定了margin負值，但是後面的元素依然覆蓋不了前面的元素。如下圖所示：
<!--HTML程式碼-->
<div class="son" style="z-index: 3"></div>
<div class="son" style="z-index: 2;margin-top: -20px;background-color: tan;"></div>
<!--分割線-->
<div class="son" style="position: relative;z-index: 3"></div>
<div class="son" style="z-index: 2;margin-top: -20px;background-color: tan;"></div>
複製程式碼下面丟擲一個問題，如果設定了對立屬性top/bottom、left/right的相對定位元素和絕對定位元素，它們是如何表現的？
在CSS深入理解之absolute定位這篇文章中，我們知道絕對定位元素表現的是拉伸特性，從而可以保持流體特性，但是相對定位卻是”你死我活”的狀態，也就是說，只有一個方向的屬性會生效，當top/bottom元素同時使用的時候，top生效，當left/bottom同時使用的時候，left生效。請看下面的這個例子：
<div class="box" style="position: relative; top: 10px;bottom: 500px"></div>
複製程式碼雖然同時設定了top/bottom對立屬性，但是生效的卻是top，如下圖所示：
因此，下面有些程式碼沒有必要：
.demo{
position: relative;
top: 10px;
right: 10px;/*無效*/
bottom: 10px;/*無效*/
left: 10px
}
複製程式碼4.相對定位relative的使用原則-最小化
雖然relative定位很好用，並且使用的頻率很高，但是根據張鑫旭大神總結的佈局實踐原則，最好基於以下原則為好：
- 儘量避免使用relative，如果要定位某些元素，看能否使用”無依賴的絕對定位”實現；
- 如果使用場景受限，一定要使用relative，則務必使relative最小化。
比如，我們想在某個模組的右上角定位一個圖示，如果讓你去佈局實現的話，你該如何佈局呢？十有八九會如下面的方式實現：
<div style="position: relative">
<img src="icon.png" style="position: absolute;top:0;right:0">
<p>內容1</p>
<p>內容2</p>
<p>內容3</p>
...
</div>
複製程式碼但是，我們可以採用”relative的最小化使用原則”的方式實現，其程式碼如下面的方式實現：
<div>
<div style="position: relative"><img src="icon.png" style="position: absolute;top:0;right:0"> </div>
<p>內容1</p>
<p>內容2</p>
<p>內容3</p>
...
</div>
複製程式碼那麼，基於”relative的最小化使用原則”的房還是實現有什麼好處呢？原因及好處如下：
relative定位元素的層疊水平提高了（敬請期待後續的文章），如果其子元素越多，則影響的範圍越廣，從專案和可維護性的角度來看，如果後期不需要這個小圖示了，我們可以大膽地幹調relative單元的元素即可，其他的元素則不需要任何的修改，然後放心的去陪妹子了。但是，如果relative在最外層的容器上，你敢刪除嗎？你敢放心的去陪妹子嗎？難道你不怕影響其他的元素嗎？所以你應該只會刪除小圖示，而不會刪除的relative屬性的。然後你的專案程式碼越來越臃腫，很多無用程式碼，看起來非常糟糕?。這麼一分析，你可知道”relative最小化使用原則“的好處了吧~
5.最後
relative定位相對與absolute和float的知識點要少很多，也比較好理解，相信大家已經搞明白了相對定位屬性的功能。後面最新文章都會第一時間更新在我的公眾號<前端Talkking>裡面，歡迎關注。
以上就是本文的全部內容，感謝閱讀，如果有表述不正確的地方，歡迎留言指正！?
6.參考
- 張鑫旭《CSS世界》
遇見了，不妨關注下我的微信公眾號「前端Talkking」