CSS深入理解之relative定位

1.前言

在前面的兩篇文章：CSS深入理解之float浮動和CSS深入理解之absolute定位中，介紹了float和absolute的特性和使用方法，如果大家仔細閱讀完了這兩篇文章，相信你的CSS打怪技能又提高的一大截，那麼趁著自己最近狀態不錯，就多給大家分享點自己平時所學的技能。一方面對自己的技能能夠有一個總結，看自己到底理解透了沒有，另一方面，以文章的形式分享出來，悅己同時悅他人。好了，開始進入今天的主題，今天輪到另一個定位屬性登場了——relative，大家鼓掌歡迎???。

2.relative的特性

relative，顧名思義，相對。在CSS中，我們都這樣使用：position: relative，翻譯成中文就是相對定位。不知道大家在使用的過程中，有沒有想過這樣的一個問題：它到底是相對誰定位呢？在揭開答案之前，我們還是以例子來說明問題。

可以直接看核心CSS程式碼：

在瀏覽器中的效果如下：

在本例中，使用.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等屬性可以發生偏移，如下：

此時，absolute元素就會迅速定位到局裡瀏覽器左側10畫素，頂部10畫素的地方。但是如果給父元素新增position: relative之後，則absolute的偏移能力被父元素限制住了，如下圖所示：

3.2 relative對overflow的限制作用

直接看下面的這個例子：

在這個例子中，.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負值，但是後面的元素依然覆蓋不了前面的元素。如下圖所示：

下面丟擲一個問題，如果設定了對立屬性top/bottom、left/right的相對定位元素和絕對定位元素，它們是如何表現的？

在CSS深入理解之absolute定位這篇文章中，我們知道絕對定位元素表現的是拉伸特性，從而可以保持流體特性，但是相對定位卻是”你死我活”的狀態，也就是說，只有一個方向的屬性會生效，當top/bottom元素同時使用的時候，top生效，當left/bottom同時使用的時候，left生效。請看下面的這個例子：

雖然同時設定了top/bottom對立屬性，但是生效的卻是top，如下圖所示：

因此，下面有些程式碼沒有必要：

4.相對定位relative的使用原則-最小化

雖然relative定位很好用，並且使用的頻率很高，但是根據張鑫旭大神總結的佈局實踐原則，最好基於以下原則為好：

1. 儘量避免使用relative，如果要定位某些元素，看能否使用”無依賴的絕對定位”實現；
2. 如果使用場景受限，一定要使用relative，則務必使relative最小化。

比如，我們想在某個模組的右上角定位一個圖示，如果讓你去佈局實現的話，你該如何佈局呢？十有八九會如下面的方式實現：

但是，我們可以採用”relative的最小化使用原則”的方式實現，其程式碼如下面的方式實現：

那麼，基於”relative的最小化使用原則”的房還是實現有什麼好處呢？原因及好處如下：

relative定位元素的層疊水平提高了（敬請期待後續的文章），如果其子元素越多，則影響的範圍越廣，從專案和可維護性的角度來看，如果後期不需要這個小圖示了，我們可以大膽地幹調relative單元的元素即可，其他的元素則不需要任何的修改，然後放心的去陪妹子了。但是，如果relative在最外層的容器上，你敢刪除嗎？你敢放心的去陪妹子嗎？難道你不怕影響其他的元素嗎？所以你應該只會刪除小圖示，而不會刪除的relative屬性的。然後你的專案程式碼越來越臃腫，很多無用程式碼，看起來非常糟糕?。這麼一分析，你可知道”relative最小化使用原則“的好處了吧~

5.最後

relative定位相對與absolute和float的知識點要少很多，也比較好理解，相信大家已經搞明白了相對定位屬性的功能。後面最新文章都會第一時間更新在我的公眾號前端Talkking>裡面，歡迎關注。

以上就是本文的全部內容，感謝閱讀，如果有表述不正確的地方，歡迎留言指正！?

6.參考

• 張鑫旭《CSS世界》
  

  ---

  作者簡介：
  中文名：石頭
  英文名：micstone
  某電商平臺前端程式設計師一名，偶爾也寫寫後端程式碼，工作經歷2016.7~至今