CSS定位方式易混淆，正確使用需理解各屬性特點(diǎn)。 1. position: static 是默認(rèn)值，元素按文檔流排列，不受定位屬性影響；2. relative 相對自己原位置偏移，常用於為絕對定位子元素提供參考點(diǎn)；3. absolute 脫離文檔流，相對於最近非static祖先元素定位；4. fixed 以視口為參考點(diǎn)定位，適合固定位置元素；5. sticky 結(jié)合相對與固定定位，滾動(dòng)到特定位置後“粘”在屏幕上，需設(shè)置偏移值且父容器不能有overflow: hidden。

網(wǎng)頁佈局中最容易讓人頭疼的，可能就是CSS 的定位方式了。不同position 屬性值的行為差異很大，用不對就會(huì)錯(cuò)位、重疊甚至完全失效。

這篇文章不講太理論的東西，只說你實(shí)際開發(fā)中會(huì)遇到的問題和怎麼解決。

什麼時(shí)候該用position: static

這是默認(rèn)值，大多數(shù)元素都是這個(gè)狀態(tài)。它意味著：按正常的文檔流排列，不參與任何定位機(jī)制。

• 不受top / bottom / left / right 影響
• 它的位置由它在HTML 中的位置決定

如果你發(fā)現(xiàn)某個(gè)元素設(shè)置了定位屬性但沒反應(yīng)，先檢查是不是忘了改position 類型。

小提醒：有時(shí)候父級用了transform或filter等屬性，會(huì)導(dǎo)致子元素即使設(shè)置了absolute 也會(huì)相對錯(cuò)誤的祖先元素定位。這種情況要特別注意。

relative 的真正用途

position: relative是個(gè)有點(diǎn)特殊的類型。它的定位是相對於自己原來的位置偏移，而不是脫離文檔流。

常見用途：

• 給絕對定位的子元素提供“參考點(diǎn)”
• 在不影響整體佈局的前提下做小幅度移動(dòng)

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

上面這段代碼會(huì)讓.box向下移動(dòng)10px，但它原本佔(zhàn)據(jù)的空間仍然保留。

這裡有個(gè)細(xì)節(jié)：雖然relative 元素還在文檔流中，但它一旦設(shè)置了z-index 或transform，就會(huì)影響層疊上下文，可能會(huì)導(dǎo)致其他元素被蓋住或顯示異常。

absolute 和fixed 的區(qū)別在哪？

這兩個(gè)都讓元素脫離文檔流，但關(guān)鍵區(qū)別在於：

• absolute是找最近的非static 定位祖先元素作為參考點(diǎn)
• fixed是以視口（瀏覽器窗口）為參考點(diǎn)

舉個(gè)例子：

• 如果你想做一個(gè)始終固定在右下角的按鈕，不管頁面滾動(dòng)多少都保持位置不變→ 用fixed
• 如果你在做一個(gè)彈出菜單，希望它相對於父容器定位→ 用absolute

使用時(shí)要注意幾點(diǎn)：

• 父容器一定要有非static 的position 值，否則absolute 會(huì)一直往上找，直到找到視口或者某個(gè)fixed 元素
• fixed 元素在移動(dòng)端可能會(huì)有兼容問題，比如iOS 的地址欄縮放會(huì)影響定位位置

sticky 是什麼？怎麼用才靠譜？

sticky是一個(gè)結(jié)合體，行為上像relative，但在滾動(dòng)到特定位置後變成fixed。

基本用法：

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

它會(huì)在滾動(dòng)到頂部時(shí)“粘”在屏幕上。

但有幾個(gè)坑需要注意：

• 必須設(shè)置top 、 bottom 、 left或right才能生效
• 父容器不能是overflow: hidden ，否則不會(huì)stick
• 不支持嵌套使用，多個(gè)sticky 元素可能會(huì)互相干擾

基本上就這些。理解清楚每種定位方式的行為，再結(jié)合具體場景選擇合適的類型，就能避免很多佈局上的麻煩。

以上是使用CSS位置類型：靜態(tài)，相對，絕對，固定，粘性的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！