CSS定位方式共有五種：static、relative、absolute、fixed和sticky。 static為默認(rèn)定位，遵循文檔流且不支持偏移；relative相對(duì)自身原位置移動(dòng)，仍在文檔流中；absolute脫離文檔流，相對(duì)於最近的非static定位祖先定位；fixed相對(duì)於瀏覽器窗口固定不動(dòng)，常用於固定導(dǎo)航欄；sticky介於relative和fixed之間，滾動(dòng)到特定位置後固定，適合做粘性頭部。掌握它們的行為差異是佈局關(guān)鍵。

CSS 的定位其實(shí)沒(méi)那麼難，但很多人一開始容易搞混。簡(jiǎn)單說(shuō)，定位就是控制元素在頁(yè)面上到底“待在哪兒”。總共有五種常用的定位方式： static 、 relative 、 absolute 、 fixed和sticky ，它們的行為差別挺大的，用錯(cuò)一個(gè)，佈局可能就亂了。

下面我從使用場(chǎng)景和行為特點(diǎn)兩個(gè)角度，講講它們的區(qū)別和怎麼用。

static 定位：默認(rèn)的定位方式

你沒(méi)寫position屬性的時(shí)候，元素就是static定位。它就是老老實(shí)實(shí)按照文檔流來(lái)排列，從上到下、從左到右，不會(huì)受top 、 bottom 、 left 、 right這些屬性影響。

• 適合大多數(shù)不需要特殊控制的元素
• 不會(huì)脫離文檔流
• 不支持偏移設(shè)置（寫了top: 20px也沒(méi)用）

所以，除非你特別想改佈局行為，否則一般不需要?jiǎng)铀?/p>

relative 定位：相對(duì)自己原來(lái)的位置移動(dòng)

這個(gè)定位方式很常用，特別是在你想微調(diào)某個(gè)元素的位置時(shí)。它還是在文檔流裡，但你可以用top 、 bottom 、 left 、 right把它稍微“挪一挪”，挪的方向是相對(duì)於它原來(lái)的位置。

舉個(gè)例子：

 .box {
  position: relative;
  top: 10px;
  left: 20px;
}

這樣， .box就會(huì)從原來(lái)的位置往下移10px，往右移20px，但它原來(lái)的位置還是空著的，不會(huì)影響其他元素的佈局。

常見(jiàn)用途：

• 做小幅度的調(diào)整
• 搭配absolute子元素使用（後面會(huì)講）

absolute 定位：脫離文檔流，相對(duì)於最近的定位祖先定位

absolute是個(gè)“自由派”，它完全脫離文檔流，位置由最近的設(shè)置了非static定位的祖先元素決定。如果沒(méi)有，就一直往上找，直到找到視口（瀏覽器窗口）為止。

舉個(gè)例子：

 .parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

這樣， .child就會(huì)定位在.parent的左上角，而不是整個(gè)頁(yè)面的左上角。

關(guān)鍵點(diǎn)：

• 會(huì)脫離文檔流，其他元素會(huì)像它不存在一樣
• 依賴最近的定位祖先（非static ）
• 常用於彈窗、下拉菜單、圖標(biāo)覆蓋等

fixed 定位：相對(duì)於瀏覽器窗口固定不動(dòng)

fixed定位和absolute很像，但它不依賴任何祖先元素，而是直接相對(duì)於瀏覽器窗口定位。即使頁(yè)面滾動(dòng)，它也始終“粘”在那個(gè)位置。

比如導(dǎo)航欄固定在頂部，或者右下角的浮動(dòng)按鈕，就經(jīng)常用它。

 .navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

注意：

• 脫離文檔流
• 不隨頁(yè)面滾動(dòng)而移動(dòng)
• 適合做固定位置的UI 元素

sticky 定位：介於relative 和fixed 之間

這是比較新的定位方式，但用起來(lái)很順手。它像是兩者的結(jié)合：在某個(gè)範(fàn)圍內(nèi)表現(xiàn)得像relative ，一旦超出這個(gè)範(fàn)圍，就變成fixed 。

最常見(jiàn)的是做“粘性”導(dǎo)航欄或者表格的固定列頭。

 .header {
  position: sticky;
  top: 0;
}

這樣，當(dāng)頁(yè)面滾動(dòng)到.header的位置時(shí)，它就會(huì)“粘”在頂部不動(dòng)。

注意點(diǎn)：

• 必須配合top 、 bottom 、 left或right使用，否則沒(méi)效果
• 不脫離文檔流
• 父容器不能有overflow: hidden或transform ，否則會(huì)失效

基本上就這些。定位方式雖然不多，但組合起來(lái)能做出各種複雜的佈局。關(guān)鍵是理解每種方式的行為特點(diǎn)，以及它們之間的區(qū)別。比如什麼時(shí)候脫離文檔流，什麼時(shí)候依賴父元素，這些細(xì)節(jié)搞清楚了，用起來(lái)才不會(huì)出錯(cuò)。

以上是解釋不同的CSS定位方案：靜態(tài)，相對(duì)，絕對(duì)，固定，粘性的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！