你是不是也經(jīng)常被CSS定位搞到頭大？別急，今天我來用最接地氣的方式，帶你徹底搞懂——CSS定位分為幾種？分別是什么定位？
作為一名深耕自媒體多年的內(nèi)容創(chuàng)作者，我每天都在和前端代碼打交道。說實(shí)話，剛學(xué)CSS時(shí)我也被定位搞得暈頭轉(zhuǎn)向，直到某天在小紅書看到一個(gè)超形象的比喻：“定位就像給元素貼標(biāo)簽，貼對了位置，整個(gè)頁面才不會亂成一團(tuán)?！边@句話讓我豁然開朗！
那么，CSS定位到底有幾種呢？答案是：四種！它們分別是：static（靜態(tài)定位）、relative（相對定位）、absolute（絕對定位）和fixed（固定定位）。
1. static —— 默認(rèn)狀態(tài)，不主動(dòng)找位置
這是HTML元素的默認(rèn)定位方式，就像你家里的貓，它不挪窩，也不搭理你。無論你怎么寫top、left，它都不動(dòng)。比如：
.box { position: static; top: 10px; left: 20px;}你看，這些屬性完全無效！所以，想讓元素“動(dòng)起來”，得換別的定位方式。
2. relative —— 相對原點(diǎn)移動(dòng)，但不影響布局
這個(gè)很適合做微調(diào)！比如你想讓一個(gè)按鈕往右偏移5像素，又不想讓它擠占其他元素的位置——這就是relative的主場！
.btn { position: relative; left: 5px;}注意：它還是占著原來的位置，只是視覺上“挪了”一點(diǎn)點(diǎn)。我之前做過一個(gè)朋友圈封面圖，就是用relative把圖標(biāo)輕輕推到右邊，整體布局特別清爽～
3. absolute —— 絕對定位，脫離文檔流
這個(gè)最常用！它會以最近的已定位祖先元素為參照物（如果沒有，就以body為基準(zhǔn)）。比如你做一個(gè)彈窗，想讓它固定在屏幕右上角：
.modal { position: absolute; top: 20px; right: 20px;}你會發(fā)現(xiàn)，彈窗不再影響其他內(nèi)容排布，完美！我在小紅書發(fā)過一篇教程，用absolute實(shí)現(xiàn)了一個(gè)“懸浮購物車”，點(diǎn)贊破千，就是因?yàn)檫@個(gè)定位太實(shí)用了！
4. fixed —— 固定在視口，滾動(dòng)也不動(dòng)
這簡直是移動(dòng)端開發(fā)神器！比如導(dǎo)航欄，不管怎么滑動(dòng)頁面，它都穩(wěn)穩(wěn)地貼在頂部。我做過一個(gè)項(xiàng)目，用fixed實(shí)現(xiàn)了一個(gè)“返回頂部”按鈕，用戶滑到哪兒都能一鍵回到頂部，體驗(yàn)感直接拉滿！
.backtotop { position: fixed; bottom: 20px; right: 20px;}總結(jié)一下：static是躺平，relative是微調(diào)，absolute是精準(zhǔn)定位，fixed是“永遠(yuǎn)在線”。掌握這四種定位，你的網(wǎng)頁布局就會像拼樂高一樣順手！
下次寫文案時(shí)，不妨試試用這些定位技巧優(yōu)化排版，朋友圈或小紅書的圖文都會更精致哦～記得收藏這篇，回頭再看一遍，你會感謝現(xiàn)在的自己！?
