【前端Talkking】CSS系列——CSS深刻理解之relative定位

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定位很好用，而且使用的頻率很高，可是根據張鑫旭大神總結的佈局實踐原則，最好基於如下原則爲好：

1. 儘可能避免使用relative，若是要定位某些元素，看可否使用"無依賴的絕對定位"實現；
2. 若是使用場景受限，必定要使用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」