分享一個(gè)關(guān)于絕對(duì)定位的實(shí)戰(zhàn)開(kāi)發(fā)經(jīng)驗(yàn)。

在普遍的認(rèn)知下，絕對(duì)定位好像都是伴隨著偏移屬性（left/right/top/bottom?）一起出現(xiàn)的，相信大家都寫(xiě)過(guò)這樣的CSS，如下：

el{
  position: absolute;
  left: 0;
  top: 0;
}

其實(shí)，有些情況下是可以不需要偏移量的，不僅實(shí)現(xiàn)上更加簡(jiǎn)潔，適應(yīng)性也更強(qiáng)，甚至還能實(shí)現(xiàn)加上偏移量反而實(shí)現(xiàn)不了的布局，一起看看吧，相信會(huì)有不一樣的體會(huì)。

一、絕對(duì)定位的特性

談到絕對(duì)定位布局，大家可能會(huì)馬上就會(huì)想到這些特性：

• 不占用空間
• 脫離文檔流

第一條沒(méi)什么問(wèn)題，確實(shí)不會(huì)占用空間。現(xiàn)在來(lái)看第二條，真的完全脫離文檔流了嗎？假設(shè)有這樣一個(gè)布局。

<p>
  歡迎關(guān)注前端偵探
</p>

然后生成一個(gè)偽元素，設(shè)置成絕對(duì)定位

p::after{
  content: 'A';
  position: absolute;
  color: red;
}

在不設(shè)置任何偏移的情況下，可以看到，絕對(duì)定位元素始終跟隨在文本后面，也就是說(shuō)，現(xiàn)在仍然處于文檔流中，如下：

如果僅設(shè)置一個(gè)方向，比如left。

p{
  position: relative;
}
p::after{
  content: 'A';
  position: absolute;
  color: red;
  left: 0;
}

那么，在水平方向上，絕對(duì)定位元素始終位于最左邊，而垂直方向上，仍然保持著跟隨文檔的特性，只是單方向的。

如果兩個(gè)方向上都設(shè)置了，這也是我們最常見(jiàn)的寫(xiě)法。

p::after{
  content: 'A';
  position: absolute;
  color: red;
  left: 0;
  top：0
}

那么，這個(gè)元素位置就完全固定了，真正的脫離了文檔流。

綜上所述，絕對(duì)定位元素，只有在設(shè)置了偏移時(shí)才會(huì)脫離文檔流，如果只設(shè)置了一個(gè)方向上的，那么在另外一個(gè)方向上仍然保留著文檔流特性，或者這么說(shuō)，絕對(duì)定位元素仍然保持在原來(lái)的位置，并且不占空間，除非設(shè)置了偏移才會(huì)真正固定定位。

了解了這些，下面來(lái)看幾個(gè)實(shí)際案例。

二、左上角的標(biāo)簽

大家可能經(jīng)常會(huì)碰到這樣的“角標(biāo)”效果。

現(xiàn)在簡(jiǎn)單實(shí)現(xiàn)一下，假設(shè)HTML是這樣的。

<div class="item">
  <img class="cover" src="xxx">
</div>

角標(biāo)可以通過(guò)偽元素生成。

.item::before{
  content: '推薦';
  position: absolute;
  font-size: 12px;
  line-height: 16px;
  padding: 2px 4px;
  background: #FDB324;
  color: #fff;
}

注意，這里用到的是::before?，而不是::after?，原因在于::before?在元素內(nèi)容之前，本身就位于左上角，如果是::after?，默認(rèn)位置就在img?的下方，在設(shè)置position: absolute的情況下，由于不占空間，所以也不影響其他元素，效果如下：

因此，像這種場(chǎng)景下，設(shè)置偏移量和父級(jí)定位可以說(shuō)都是多余的。

/*以下是多余的*/
.item{
  position: relative;
}
.item::before{
  left: 0;
  top: 0;
}

如果你的項(xiàng)目中也有這樣的布局，趕緊優(yōu)化一下吧，當(dāng)然僅限于“左上角”的標(biāo)簽，如果是其他方位的，按傳統(tǒng)實(shí)現(xiàn)即可。

完整 demo 可以訪問(wèn)以下任意鏈接：

• CSS absolute tag (juejin.cn)^[1]
• CSS absolute tag (codepen.io)^[2]
• CSS absolute tag (runjs.work)^[3]

三、文本重疊

有時(shí)候在做文本特效時(shí)，不可避免需要重疊文本，比如文本外描邊效果。

大家可能都知道，文本描邊其實(shí)是居中描邊的。

.text{
    -webkit-text-stroke: 6px rgb(51, 51, 51);
}

這樣會(huì)帶來(lái)一個(gè)問(wèn)題，當(dāng)描邊慢慢變大時(shí)，會(huì)覆蓋文字顏色。

為了解決這個(gè)問(wèn)題，我們需要用到兩層文本，在底下放描邊，上面放文本顏色，示意如下：

而這里兩層重疊的文本就需要用到絕對(duì)定位了，假設(shè)HTML是這樣的。

<p class="text" data-title="前端偵探">前端偵探</p>

這里加另一個(gè)data-title屬性，用來(lái)生成偽元素，關(guān)鍵實(shí)現(xiàn)如下：

.text::before{
    content: attr(data-title);
    position: absolute;
}

只需要將::before?設(shè)置絕對(duì)定位即可，注意是::before，無(wú)需任何其他偏移屬性，文本就默認(rèn)重疊了，而且由于是絕對(duì)定位，層級(jí)也自動(dòng)變高

從這里也可以看出，在絕對(duì)定位中，::before?要比::after要好用的多！

完整 demo 可以訪問(wèn)以下任意鏈接：

• CSS text stroke (juejin.cn)^[5]
• CSS text stroke (codepen.io)^[6]
• CSS text stroke (runjs.work)^[7]

四、多個(gè)元素水平垂直堆疊居中

再來(lái)看一個(gè)這樣的例子，有多個(gè)尺寸不定的元素或者圖片，需要堆疊居中，示意如下：

最簡(jiǎn)單的方式就是，父容器設(shè)置flex居中特性，然后子元素直接設(shè)置絕對(duì)定位，關(guān)鍵實(shí)現(xiàn)如下：

.wrap{
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  position: absolute;
}

原因在于，本身元素是居中的，設(shè)置絕對(duì)定位后，僅僅不占空間而已，所以后面的元素會(huì)堆疊上來(lái)而不擠壓，特別適合圖片堆疊展示的效果

完整 demo 可以訪問(wèn)以下任意鏈接：

• CSS absolute center (juejin.cn)^[8]
• CSS absolute center (codepen.io)^[9]
• CSS absolute center (runjs.work)^[10]

五、自定義水平方向點(diǎn)擊范圍

還記得之前這篇文章嗎？??CSS 實(shí)現(xiàn)樹(shù)狀結(jié)構(gòu)目錄??^[11]

里面有個(gè)小細(xì)節(jié)也用到了絕對(duì)定位，非常巧妙，下面簡(jiǎn)單回顧一下：

假設(shè)HTML是這樣的。

<details>
  <details>
    <summary>
      <span class="tree-item">文件夾1-1</span>
    </summary>
    <details>
      <summary>
        <span class="tree-item">文件夾1-1-2</span>
      </summary>
    </details>
    <details>
      <summary>
        <span class="tree-item">文件夾1-1-3</span>
      </summary>
      <details>
        <summary>
          <span class="tree-item">文件夾1-1-3-1</span>
        </summary>
      </details>
      <details>
        <summary>
          <span class="tree-item">文件夾1-1-3-2</span>
        </summary>
      </details>
    </details>
  </details>
</details>

樹(shù)形結(jié)構(gòu)有一個(gè)明顯的縮進(jìn)層級(jí)關(guān)系，這里是通過(guò)內(nèi)邊距實(shí)現(xiàn)的。

details{
  padding-left: 10px
}

有個(gè)問(wèn)題是，由于是逐層嵌套結(jié)構(gòu)，導(dǎo)致 層級(jí)越深，點(diǎn)擊范圍越小，就像這樣。

那么，如何做成通欄都可以點(diǎn)擊呢？

這時(shí)，我們可以創(chuàng)建一個(gè)偽元素，并設(shè)置絕對(duì)定位，但是只需要設(shè)置水平方向上的偏移量，這樣在水平方向上位置就是固定的（相對(duì)于外層父級(jí)），而垂直方向上，仍然處于默認(rèn)位置，也就是跟隨容器本身，關(guān)鍵實(shí)現(xiàn)如下：

.tree{
  /*最外層父級(jí)需要設(shè)置相對(duì)定位*/
  position: relative;
}
.tree-item::before{
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;/*水平方向的尺寸依賴于父級(jí).tree*/
    height: 38px;
    background: #EEF2FF;
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: .2s;
}
.tree-item:hover::before{
    opacity: 1;
}

效果是這樣的。

這樣就非常完美了，而且除了這種方式，好像找不到其他更好的解決方案了，有其他解決方案歡迎留言討論。

完整 demo 可以訪問(wèn)以下任意鏈接：

• CSS tree (juejin.cn)^[12]
• CSS tree (codepen.io)^[13]
• CSS tree (runjs.work)^[14]

六、最后總結(jié)一下

舉了這么多例子，其實(shí)無(wú)非就是想強(qiáng)調(diào)一下，在使用絕對(duì)定位時(shí)并不一定需要left?或者top這樣的偏移量，不僅代碼更加精簡(jiǎn)，有時(shí)還能達(dá)到意想不到的效果，下面總結(jié)一下

1. 絕對(duì)布局的特性是不占空間，但不一定完全脫離文檔流，只有在設(shè)置了偏移時(shí)才會(huì)脫離文檔流。
2. 如果只設(shè)置了一個(gè)方向上的偏移量，那么在另外一個(gè)方向上仍然保留著文檔流特性。
3. 在絕對(duì)定位中，::before?要比::after?要好用的多，因?yàn)?:before默認(rèn)就是初始位置，可以很輕易的實(shí)現(xiàn)重疊效果。

參考資料

[1]CSS absolute tag (juejin.cn): https://code.juejin.cn/pen/7203544411974664224。

[2]CSS absolute tag (codepen.io): https://codepen.io/xboxyan/pen/wvEWRoJ。

[3]CSS absolute tag (runjs.work): https://runjs.work/projects/ce00c1830e6e47a9。

[4]CSS和SVG實(shí)現(xiàn)文字漸變、描邊、投影: https://juejin.cn/post/7010944239609577508。

[5]CSS text stroke (juejin.cn): https://code.juejin.cn/pen/7203553341917298725。

[6]CSS text stroke (codepen.io): https://codepen.io/xboxyan/pen/rNZLoKP。

[7]CSS text stroke (runjs.work): https://runjs.work/projects/39c51954b6494e88。

[8]CSS absolute center (juejin.cn): https://code.juejin.cn/pen/7203558150899925050。

[9]CSS absolute center (codepen.io): https://codepen.io/xboxyan/pen/yLxJGwQ。

[10]CSS absolute center (runjs.work): https://runjs.work/projects/5a558fc986ae4fb1。

[11]CSS 實(shí)現(xiàn)樹(shù)狀結(jié)構(gòu)目錄: https://juejin.cn/post/7095580369537204238。

[12]CSS tree (juejin.cn): https://code.juejin.cn/pen/7085639478659776542。

[13]CSS tree (codepen.io): https://codepen.io/xboxyan/pen/ExoRQNX。

[14]CSS tree (runjs.work): https://runjs.work/projects/949c2f2eacb94ff7。