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

display屬性指定網(wǎng)頁的布局。兩個(gè)重要的布局，我已經(jīng)介紹過了：彈性布局flex^[1]和網(wǎng)格布局grid^[2]。

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

本文由國內(nèi)最大的在線教育平臺(tái)之一“騰訊課堂”^[3]贊助。他們現(xiàn)在啟動(dòng)了“騰訊課堂101計(jì)劃”^[4]，推廣平臺(tái)上的課程資源，有不少優(yōu)質(zhì)內(nèi)容。希望提高前端技術(shù)水平的同學(xué)，可以留意一下本文結(jié)尾的免費(fèi)課程信息。

一、position 屬性的作用

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

·static·relative·fixed·absolute·sticky

下面就依次介紹這五個(gè)值。最后一個(gè)sticky是2017年瀏覽器才支持的，本文將重點(diǎn)介紹。

二、static 屬性值

static是position屬性的默認(rèn)值。如果省略position屬性，瀏覽器就認(rèn)為該元素是static定位。

這時(shí)，瀏覽器會(huì)按照源碼的順序，決定每個(gè)元素的位置，這稱為“正常的頁面流”（normal flow）。每個(gè)塊級(jí)元素占據(jù)自己的區(qū)塊（block），元素與元素之間不產(chǎn)生重疊，這個(gè)位置就是元素的默認(rèn)位置。

注意，static定位所導(dǎo)致的元素位置，是瀏覽器自主決定的，所以這時(shí)top、bottom、left、right這四個(gè)屬性無效。

三、relative，absolute，fixed

relative、absolute、fixed這三個(gè)屬性值有一個(gè)共同點(diǎn)，都是相對于某個(gè)基點(diǎn)的定位，不同之處僅僅在于基點(diǎn)不同。所以，只要理解了它們的基點(diǎn)是什么，就很容易掌握這三個(gè)屬性值。

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

relative表示，相對于默認(rèn)位置（即static時(shí)的位置）進(jìn)行偏移，即定位基點(diǎn)是元素的默認(rèn)位置。

它必須搭配top、bottom、left、right這四個(gè)屬性一起使用，用來指定偏移的方向和距離。

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

absolute表示，相對于上級(jí)元素（一般是父元素）進(jìn)行偏移，即定位基點(diǎn)是父元素。

它有一個(gè)重要的限制條件：父元素不能是static定位，否則定位基點(diǎn)就會(huì)變成整個(gè)網(wǎng)頁的根元素html。另外，absolute定位也必須搭配top、bottom、left、right這四個(gè)屬性一起使用。

/* HTML 代碼如下 <div id='father'> <div id='son'></div> </div>*/
#father { positon: relative;}#son { position: absolute; top: 20px;}

上面代碼中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基點(diǎn)是父元素，相對于父元素的頂部向下偏移20px。如果父元素是static定位，上例的子元素就是距離網(wǎng)頁的頂部向下偏移20px。

注意，absolute定位的元素會(huì)被“正常頁面流”忽略，即在“正常頁面流”中，該元素所占空間為零，周邊元素不受影響。

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

它如果搭配top、bottom、left、right這四個(gè)屬性一起使用，表示元素的初始位置是基于視口計(jì)算的，否則初始位置就是元素的默認(rèn)位置。

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

四、sticky 屬性值

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

因此，它能夠形成“動(dòng)態(tài)固定”的效果。比如，網(wǎng)頁的搜索工具欄，初始加載時(shí)在自己的默認(rèn)位置（relative定位）。

頁面向下滾動(dòng)時(shí)，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）。

等到頁面重新向上滾動(dòng)回到原位，工具欄也會(huì)回到默認(rèn)位置。

sticky生效的前提是，必須搭配top、bottom、left、right這四個(gè)屬性一起使用，不能省略，否則等同于relative定位，不產(chǎn)生“動(dòng)態(tài)固定”的效果。原因是這四個(gè)屬性用來定義“偏移距離”，瀏覽器把它當(dāng)作sticky的生效門檻。

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

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

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

上面代碼中，頁面向下滾動(dòng)時(shí)，#toolbar的父元素開始脫離視口，一旦視口的頂部與#toolbar的距離小于20px（門檻值），#toolbar就自動(dòng)變?yōu)?code>fixed定位，保持與視口頂部20px的距離。頁面繼續(xù)向下滾動(dòng)，父元素徹底離開視口（即整個(gè)父元素完全不可見），#toolbar恢復(fù)成relative定位。

五、 sticky 的應(yīng)用

sticky定位可以實(shí)現(xiàn)一些很有用的效果。除了上面提到“動(dòng)態(tài)固定”效果，這里再介紹兩個(gè)。

5.1 堆疊效果

堆疊效果（stacking）指的是頁面滾動(dòng)時(shí)，下方的元素覆蓋上方的元素。下面是一個(gè)圖片堆疊的例子，下方的圖片會(huì)隨著頁面滾動(dòng)，覆蓋上方的圖片（查看 demo^[5]）。

HTML 代碼就是幾張圖片。

CSS 代碼極其簡單，只要兩行。

div { position: sticky; top: 0;}

它的原理是頁面向下滾動(dòng)時(shí)，每張圖片都會(huì)變成fixed定位，導(dǎo)致后一張圖片重疊在前一張圖片上面。詳細(xì)解釋可以看這里^[6]。

大型表格滾動(dòng)的時(shí)候，表頭始終固定，也可以用sticky實(shí)現(xiàn)（查看 demo^[7]）。

CSS 代碼也很簡單。

需要注意的是，sticky必須設(shè)在<th>元素上面，不能設(shè)在<thead>和<tr>元素，因?yàn)檫@兩個(gè)元素沒有relative定位，也就無法產(chǎn)生sticky效果。詳細(xì)解釋可以看這里^[8]。

（正文完）

免費(fèi)前端全棧課程

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

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

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

（1）Node.js：服務(wù)器端的 JavaScript 運(yùn)行環(huán)境，不管哪種前端開發(fā)，都必不可少的底層環(huán)境。

（2）Webpack：語法轉(zhuǎn)換工具，把 ES6/TypeScript/JSX 語法轉(zhuǎn)成瀏覽器可以運(yùn)行的代碼。

（3）Koa2：一個(gè)非常流行、簡潔強(qiáng)大的 Node.js 后端的 Web 開發(fā)框架。

（4）MongoDB：目前應(yīng)用最廣泛的非關(guān)系數(shù)據(jù)庫之一，功能豐富，用法較簡單。

（5）Vue 全家桶：

·Vue：前端基礎(chǔ)框架·Vuex：配套的前端狀態(tài)管理庫?！ue Router：官方的路由插件，構(gòu)建單頁面應(yīng)用必不可少。·Vue CLI：腳手架工具，幫你快速上手 Vue 開發(fā)，無需再花多余時(shí)間去實(shí)現(xiàn)項(xiàng)目架構(gòu)?！ant：有贊前端團(tuán)隊(duì)開發(fā)的輕量級(jí)移動(dòng)端 Vue 組件庫，讓你快速使用已經(jīng)封裝好的各種頁面組件。

看到這個(gè)名單，你是不是感到有點(diǎn)頭大，全部掌握它們需要多少時(shí)間??？

現(xiàn)在，騰訊課堂就有一門這樣的課程，內(nèi)容包含了所有這些工具，教你怎么用它們從頭完成一個(gè)全棧項(xiàng)目，親手做出一個(gè)手機(jī)端的移動(dòng)商城，是由 慕課網(wǎng)的精英講師--謝成老師講授。

該課程的制作單位是青盟科技。它是《騰訊課堂101計(jì)劃》重點(diǎn)推廣的優(yōu)質(zhì)機(jī)構(gòu)，已有7年 IT 行業(yè)教學(xué)經(jīng)驗(yàn)，培養(yǎng)收費(fèi)學(xué)員2000+，有超過72%的學(xué)員都進(jìn)入到名企大廠。如果你想了解課程的詳細(xì)內(nèi)容，獲取課程大綱，或者想接受系統(tǒng)的前端培訓(xùn)，可以登錄騰訊課堂查看“青盟科技”。

（完）

[1]彈性布局flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2]網(wǎng)格布局grid:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

[3]“騰訊課堂”:https://ke.qq.com/?utm=ruanyifeng

[4]“騰訊課堂101計(jì)劃”:https://edu.qq.com/a/20190119/005414.htm

[5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

[6]這里:https:///vinceumo/slide-stacking-effect-using-position-sticky-91f

[7]demo:https://jsbin.com/decemanohe/edit?html,css,output

[8]這里:https://css-tricks.com/position-sticky-and-table-headers/