CSS 定位詳解

作者：阮一峰

CSS 有兩個最重要的基本屬性腰懂，前端開發(fā)必須掌握：display 和 position先蒋。

display屬性指定網(wǎng)頁的布局职恳。兩個重要的布局揩尸，我已經(jīng)介紹過了：彈性布局flex和網(wǎng)格布局grid蛹屿。

本文介紹非常有用的position屬性。我希望通過10分鐘的閱讀岩榆，幫助大家輕松掌握網(wǎng)頁定位错负，說清楚瀏覽器如何計算網(wǎng)頁元素的位置，尤其是新引進的sticky定位勇边。

image

一犹撒、position 屬性的作用

position屬性用來指定一個元素在網(wǎng)頁上的位置，一共有5種定位方式粒褒，即position屬性主要有五個值识颊。

static

relative

fixed

absolute

sticky

下面就依次介紹這五個值。最后一個sticky是2017年瀏覽器才支持的奕坟，本文將重點介紹祥款。

二、static 屬性值

static是position屬性的默認值执赡。如果省略position屬性镰踏，瀏覽器就認為該元素是static定位。

這時沙合，瀏覽器會按照源碼的順序奠伪，決定每個元素的位置跌帐，這稱為"正常的頁面流"（normal flow）。每個塊級元素占據(jù)自己的區(qū)塊（block）绊率，元素與元素之間不產(chǎn)生重疊谨敛，這個位置就是元素的默認位置。

image

注意滤否，static定位所導(dǎo)致的元素位置脸狸，是瀏覽器自主決定的，所以這時top藐俺、bottom炊甲、left、right這四個屬性無效欲芹。

三卿啡、relative，absolute菱父，fixed

relative颈娜、absolute、fixed這三個屬性值有一個共同點浙宜，都是相對于某個基點的定位官辽，不同之處僅僅在于基點不同。所以粟瞬，只要理解了它們的基點是什么同仆，就很容易掌握這三個屬性值。

這三種定位都不會對其他元素的位置產(chǎn)生影響亩钟，因此元素之間可能產(chǎn)生重疊乓梨。

3.1 relative 屬性值

relative表示，相對于默認位置（即static時的位置）進行偏移清酥，即定位基點是元素的默認位置。

image

它必須搭配top蕴侣、bottom焰轻、left、right這四個屬性一起使用昆雀，用來指定偏移的方向和距離辱志。

image


div {
  position: relative;
  top: 20px;
}

上面代碼中，div元素從默認位置向下偏移20px（即距離頂部20px）狞膘。

3.2 absolute 屬性值

absolute表示揩懒，相對于上級元素（一般是父元素）進行偏移，即定位基點是父元素挽封。

它有一個重要的限制條件：定位基點（一般是父元素）不能是static定位已球，否則定位基點就會變成整個網(wǎng)頁的根元素html。另外，absolute定位也必須搭配top智亮、bottom忆某、left、right這四個屬性一起使用阔蛉。

image


/*
  HTML 代碼如下
  <div id="father">
    <div id="son"></div>
  </div>
*/

#father {
  positon: relative;
}
#son {
  position: absolute;
  top: 20px;
}

上面代碼中弃舒，父元素是relative定位，子元素是absolute定位状原，所以子元素的定位基點是父元素聋呢，相對于父元素的頂部向下偏移20px。如果父元素是static定位颠区，上例的子元素就是距離網(wǎng)頁的頂部向下偏移20px削锰。

注意，absolute定位的元素會被"正常頁面流"忽略瓦呼，即在"正常頁面流"中喂窟，該元素所占空間為零，周邊元素不受影響央串。

3.3 fixed 屬性值

fixed表示磨澡，相對于視口（viewport，瀏覽器窗口）進行偏移质和，即定位基點是瀏覽器窗口稳摄。這會導(dǎo)致元素的位置不隨頁面滾動而變化，好像固定在網(wǎng)頁上一樣饲宿。

image

它如果搭配top厦酬、bottom、left瘫想、right這四個屬性一起使用仗阅，表示元素的初始位置是基于視口計算的，否則初始位置就是元素的默認位置国夜。


div {
  position: fixed;
  top: 0;
}

上面代碼中减噪，div元素始終在視口頂部，不隨網(wǎng)頁滾動而變化车吹。

四筹裕、sticky 屬性值

sticky跟前面四個屬性值都不一樣，它會產(chǎn)生動態(tài)效果窄驹，很像relative和fixed的結(jié)合：一些時候是relative定位（定位基點是自身默認位置）朝卒，另一些時候自動變成fixed定位（定位基點是視口）。

因此乐埠，它能夠形成"動態(tài)固定"的效果抗斤。比如囚企，網(wǎng)頁的搜索工具欄，初始加載時在自己的默認位置（relative定位）豪治。

image

頁面向下滾動時洞拨，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）负拟。

image

等到頁面重新向上滾動回到原位烦衣，工具欄也會回到默認位置。

sticky生效的前提是掩浙，必須搭配top花吟、bottom、left厨姚、right這四個屬性一起使用衅澈，不能省略，否則等同于relative定位谬墙，不產(chǎn)生"動態(tài)固定"的效果今布。原因是這四個屬性用來定義"偏移距離"，瀏覽器把它當(dāng)作sticky的生效門檻拭抬。

它的具體規(guī)則是部默，當(dāng)頁面滾動，父元素開始脫離視口時（即部分不可見）造虎，只要與sticky元素的距離達到生效門檻傅蹂，relative定位自動切換為fixed定位；等到父元素完全脫離視口時（即完全不可見）算凿，fixed定位自動切換回relative定位份蝴。

請看下面的示例代碼。（注意氓轰，除了已被淘汰的 IE 以外婚夫，其他瀏覽器目前都支持sticky。但是署鸡，Safari 瀏覽器需要加上瀏覽器前綴-webkit-请敦。）


#toolbar {
  position: -webkit-sticky; /* safari 瀏覽器 */
  position: sticky; /* 其他瀏覽器 */
  top: 20px;
}

上面代碼中，頁面向下滾動時储玫，#toolbar的父元素開始脫離視口，一旦視口的頂部與#toolbar的距離小于20px（門檻值）萤皂，#toolbar就自動變?yōu)?code>fixed定位撒穷，保持與視口頂部20px的距離。頁面繼續(xù)向下滾動裆熙，父元素徹底離開視口（即整個父元素完全不可見）端礼，#toolbar恢復(fù)成relative定位禽笑。

五、 sticky 的應(yīng)用

sticky定位可以實現(xiàn)一些很有用的效果蛤奥。除了上面提到"動態(tài)固定"效果佳镜，這里再介紹兩個。

5.1 堆疊效果

堆疊效果（stacking）指的是頁面滾動時凡桥，下方的元素覆蓋上方的元素蟀伸。下面是一個圖片堆疊的例子，下方的圖片會隨著頁面滾動缅刽，覆蓋上方的圖片（查看 demo）啊掏。

image

HTML 代碼就是幾張圖片。


<div><img src="pic1.jpg"></div>
<div><img src="pic2.jpg"></div>
<div><img src="pic3.jpg"></div>

CSS 代碼極其簡單衰猛，只要兩行迟蜜。


div {
  position: sticky;
  top: 0;
}

它的原理是頁面向下滾動時，每張圖片都會變成fixed定位啡省，導(dǎo)致后一張圖片重疊在前一張圖片上面娜睛。詳細解釋可以看這里。

5.2 表格的表頭鎖定

大型表格滾動的時候卦睹，表頭始終固定畦戒，也可以用sticky實現(xiàn)（查看 demo）。

image

CSS 代碼也很簡單分预。


th {
  position: sticky;
  top: 0; 
}

需要注意的是兢交，sticky必須設(shè)在<th>元素上面，不能設(shè)在<thead>和<tr>元素笼痹，因為這兩個元素沒有relative定位配喳，也就無法產(chǎn)生sticky效果。詳細解釋可以看這里凳干。

（正文完）

免費前端全棧課程

初學(xué)者剛接觸前端晴裹，往往會被一大堆技術(shù)名詞、框架和工具救赐，搞得眼花繚亂涧团。

到底哪些技術(shù)是目前的主流技術(shù)棧，既能用于公司的開發(fā)實務(wù)经磅，又能為自己的簡歷增添亮點泌绣？

image

下面就是一套目前主流的前端技術(shù)棧。

（1）Node.js：服務(wù)器端的 JavaScript 運行環(huán)境预厌，不管哪種前端開發(fā)阿迈，都必不可少的底層環(huán)境。
（2）Webpack：語法轉(zhuǎn)換工具轧叽，把 ES6/TypeScript/JSX 語法轉(zhuǎn)成瀏覽器可以運行的代碼苗沧。
（3）Koa2：一個非常流行刊棕、簡潔強大的 Node.js 后端的 Web 開發(fā)框架。
（4）MongoDB：目前應(yīng)用最廣泛的非關(guān)系數(shù)據(jù)庫之一待逞，功能豐富甥角，用法較簡單。
（5）Vue 全家桶：

Vue：前端基礎(chǔ)框架

Vuex：配套的前端狀態(tài)管理庫识樱。

Vue Router：官方的路由插件嗤无，構(gòu)建單頁面應(yīng)用必不可少。

Vue CLI：腳手架工具牺荠，幫你快速上手 Vue 開發(fā)翁巍，無需再花多余時間去實現(xiàn)項目架構(gòu)。

Vant：有贊前端團隊開發(fā)的輕量級移動端 Vue 組件庫休雌，讓你快速使用已經(jīng)封裝好的各種頁面組件灶壶。
（完）