整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頁(yè)布局對(duì)改善網(wǎng)站的外觀非常重要。
請(qǐng)慎重設(shè)計(jì)您的網(wǎng)頁(yè)布局。
在線實(shí)例
使用 <div> 元素的網(wǎng)頁(yè)布局
如何使用 <div> 元素添加布局。
使用 <table> 元素的網(wǎng)頁(yè)布局
如何使用 <table> 元素添加布局。
網(wǎng)站布局
大多數(shù)網(wǎng)站會(huì)把內(nèi)容安排到多個(gè)列中（就像雜志或報(bào)紙那樣）。
大多數(shù)網(wǎng)站可以使用 <div> 或者 <table> 元素來(lái)創(chuàng)建多列。CSS 用于對(duì)元素進(jìn)行定位，或者為頁(yè)面創(chuàng)建背景以及色彩豐富的外觀。
| 雖然我們可以使用HTML table標(biāo)簽來(lái)設(shè)計(jì)出漂亮的布局，但是table標(biāo)簽是不建議作為布局工具使用的 - 表格不是布局工具。 |
HTML 布局 - 使用<div> 元素
div 元素是用于分組 HTML 元素的塊級(jí)元素。
下面的例子使用五個(gè) div 元素來(lái)創(chuàng)建多列布局：
實(shí)例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網(wǎng)頁(yè)標(biāo)題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內(nèi)容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權(quán) ? runoob.com</div></div></body></html>
上面的 HTML 代碼會(huì)產(chǎn)生如下結(jié)果：
HTML 布局 - 使用表格
使用 HTML <table> 標(biāo)簽是創(chuàng)建布局的一種簡(jiǎn)單的方式。
大多數(shù)站點(diǎn)可以使用 <div> 或者 <table> 元素來(lái)創(chuàng)建多列。CSS 用于對(duì)元素進(jìn)行定位，或者為頁(yè)面創(chuàng)建背景以及色彩豐富的外觀。
| 即使可以使用 HTML 表格來(lái)創(chuàng)建漂亮的布局，但設(shè)計(jì)表格的目的是呈現(xiàn)表格化數(shù)據(jù) - 表格不是布局工具！ |
下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來(lái)橫跨兩列：
實(shí)例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網(wǎng)頁(yè)標(biāo)題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內(nèi)容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權(quán) ? runoob.com</td></tr></table></body></html>
上面的 HTML 代碼會(huì)產(chǎn)生以下結(jié)果：
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點(diǎn)會(huì)更易于維護(hù)。通過(guò)編輯單一的文件，就可以改變所有頁(yè)面的布局。如需學(xué)習(xí)更多有關(guān) CSS 的知識(shí)，請(qǐng)?jiān)L問(wèn)我們的CSS 教程。
Tip: 由于創(chuàng)建高級(jí)的布局非常耗時(shí)，使用模板是一個(gè)快速的選項(xiàng)。通過(guò)搜索引擎可以找到很多免費(fèi)的網(wǎng)站模板（您可以使用這些預(yù)先構(gòu)建好的網(wǎng)站布局，并優(yōu)化它們）。
HTML 布局標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <div> | 定義文檔區(qū)塊，塊級(jí)(block-level) |
| <span> | 定義 span，用來(lái)組合文檔中的行內(nèi)元素。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
. 流式定位
這是網(wǎng)頁(yè)元素默認(rèn)的定位方式，網(wǎng)頁(yè)元素按照其HTML標(biāo)簽的先后順序，在網(wǎng)頁(yè)內(nèi)依次顯示，就像液體一樣“流動(dòng)”，所以稱為“流式定位”，這種方式將所有網(wǎng)頁(yè)元素的默認(rèn)顯示方式分為以下幾種類型：
塊級(jí)元素（display: block）： 可以設(shè)置寬度，默認(rèn)寬度為100%，但不管多寬都會(huì)獨(dú)占一行，多個(gè)塊級(jí)元素按從上到下的順序縱向顯示，默認(rèn)顯示為塊級(jí)元素的包括：段落(p)、層(div)、表單(form)等。
內(nèi)聯(lián)元素（display: inline）： 不會(huì)獨(dú)占一行，可以多個(gè)元素共享一行，按從左至右的順序橫向顯示，默認(rèn)顯示為內(nèi)聯(lián)元素的包括：文本標(biāo)簽(label)、鏈接(a)等。
行內(nèi)塊元素（display: inline-block）： 這種定位方式兼具塊級(jí)元素和內(nèi)聯(lián)元素的優(yōu)勢(shì)，既可以像塊級(jí)元素一樣設(shè)置寬度和高度，又可以一行放置多個(gè)，默認(rèn)顯示為內(nèi)聯(lián)元素的包括：圖片(img)、輸入項(xiàng)(input)、多行文本(textarea)等。
可以通過(guò)設(shè)置HTML元素的CSS樣式的display屬性來(lái)改變?cè)啬J(rèn)的流式定位方式，例如將層(div)元素設(shè)置為行內(nèi)塊元素后，就可以跟文本標(biāo)簽(label)、圖片(img)等元素放在同一行顯示，不再獨(dú)占一行。
流式定位存在一些問(wèn)題，主要包括：
l 塊級(jí)元素很難被有效利用起來(lái)，因?yàn)槠洫?dú)占一行的特性，不能一行顯示多個(gè)。
l 內(nèi)聯(lián)元素?zé)o法設(shè)置寬度、高度和垂直方向邊距，不好精確控制元素大小和顯示位置。
l 內(nèi)聯(lián)元素之間水平方向會(huì)因?yàn)榇a中的空格、換行等產(chǎn)生間隙，垂直方向存在默認(rèn)的底部間隙，這給水平布局帶來(lái)額外的麻煩。
2. 浮動(dòng)定位
浮動(dòng)定位會(huì)讓元素脫離原來(lái)的標(biāo)準(zhǔn)文檔流浮動(dòng)起來(lái)，直至它的外邊緣遇到父元素的內(nèi)邊緣或者另一個(gè)兄弟浮動(dòng)元素的外邊緣。
任何HTML元素都可以設(shè)置為浮動(dòng)，可以通過(guò)設(shè)置HTML元素的CSS樣式的float屬性來(lái)設(shè)置具體的浮動(dòng)方式，可以選擇向左浮動(dòng)（float: left）或向右浮動(dòng)（float: right）。
相對(duì)于網(wǎng)頁(yè)默認(rèn)的流式定位，浮動(dòng)定位有以下優(yōu)勢(shì)：
l 多個(gè)塊級(jí)元素可以共享一行。
l 內(nèi)聯(lián)元素可以設(shè)置寬度和高度。
l 元素之間的空格、換行不影響元素的顯示位置。
浮動(dòng)定位最初被設(shè)計(jì)出來(lái)是為了實(shí)現(xiàn)文字環(huán)繞圖片顯示的效果，但由于其上述優(yōu)勢(shì)，后來(lái)大家也用浮動(dòng)定位來(lái)設(shè)置更多網(wǎng)頁(yè)元素的位置，代替默認(rèn)的流式定位，也是TaskBuilder默認(rèn)的組件定位方式。
不過(guò)，浮動(dòng)定位也有一些問(wèn)題，不是所有的場(chǎng)合都適合，大家根據(jù)需要選擇，這些問(wèn)題包括：
l 居中對(duì)齊問(wèn)題：浮動(dòng)定位不太好實(shí)現(xiàn)垂直和水平居中對(duì)齊。
l 父元素的高度塌陷問(wèn)題：如果元素不浮動(dòng)，會(huì)自動(dòng)撐開(kāi)父元素的高度，浮動(dòng)后，由于浮動(dòng)元素已經(jīng)脫離原來(lái)的標(biāo)準(zhǔn)流，如果父元素沒(méi)有設(shè)置高度，且父元素中沒(méi)有其他非浮動(dòng)元素時(shí)，會(huì)造成父元素的高度塌陷（高度變成了0）。
3. 坐標(biāo)定位
坐標(biāo)定位是指為HTML元素設(shè)置上下左右的偏移量來(lái)確定其具體的顯示位置或大小，通過(guò)設(shè)置元素CSS的position屬性，可以選擇坐標(biāo)定位的具體方式，包括：
相對(duì)定位（position: relative）：即相對(duì)于元素在流式定位時(shí)的正常位置進(jìn)行定位，您可以通過(guò) top、right、bottom、left 這 4 個(gè)CSS屬性來(lái)設(shè)置元素相對(duì)于正常位置的偏移量，在此過(guò)程中不會(huì)對(duì)其它元素造成影響。
相對(duì)定位示意圖
絕對(duì)定位（position: absolute）：即相對(duì)于第一個(gè)非靜態(tài)定位的父級(jí)元素進(jìn)行定位，可以通過(guò) top、right、bottom、left 這 4 個(gè)屬性來(lái)設(shè)置元素相對(duì)于父級(jí)元素位置的偏移量。如果沒(méi)有滿足條件的父級(jí)元素，則會(huì)相對(duì)于瀏覽器窗口來(lái)進(jìn)行定位。元素使用絕對(duì)定位后，其他標(biāo)準(zhǔn)流元素會(huì)填補(bǔ)它的位置。絕對(duì)定位可以通過(guò)設(shè)置元素CSS樣式的left和top屬性來(lái)精確控制元素的顯示位置，再設(shè)置right或bottom這兩個(gè)CSS樣式，實(shí)現(xiàn)元素的寬度或高度根據(jù)父元素的寬度和高度動(dòng)態(tài)設(shè)置和變化。
絕對(duì)定位示意圖
固定定位（position: fixed）：即相對(duì)于瀏覽器的窗口進(jìn)行定位，可以使用 top、right、bottom、left 這 4 個(gè)CSS屬性來(lái)定義元素相對(duì)于瀏覽器窗口的位置。使用固定定位的元素?zé)o論如何滾動(dòng)瀏覽器窗口，元素的位置都是固定不變的。
粘性定位（position: sticky）：它是相對(duì)定位和固定定位的結(jié)合體，能夠?qū)崿F(xiàn)類似吸附的效果，當(dāng)滾動(dòng)頁(yè)面時(shí)它的效果與相對(duì)定位相同，當(dāng)元素要滾動(dòng)到屏幕之外時(shí)則會(huì)自動(dòng)變成固定定位的效果。用粘性定位很容易實(shí)現(xiàn)元素置頂顯示的效果。
4. 表格定位
顧名思義，表格定位就是用表格來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的定位，先繪制一個(gè)多行多列的表格，并設(shè)定表格各列的寬度和各行的高度，然后在表格的單元格里插入相關(guān)網(wǎng)頁(yè)元素，最終實(shí)現(xiàn)這些元素的位置定位。
這種定位方式比較適合可以將頁(yè)面內(nèi)容清晰明確地劃分為多行多列的場(chǎng)景，例如各種業(yè)務(wù)單據(jù)和數(shù)據(jù)報(bào)表等。
有兩種方式可以實(shí)現(xiàn)表格布局： HTML Table（<table>標(biāo)簽）和CSS Table（display:table 等相關(guān)屬性）。HTML Table是早期網(wǎng)頁(yè)設(shè)計(jì)采用的表格定位方式，由于其渲染性能較低，且有些界面效果較難實(shí)現(xiàn)，用的人已經(jīng)比較少了，現(xiàn)在推薦使用CSS Table，能實(shí)現(xiàn)一些HTML Table做不到的效果。
目前，TaskBuilder只是在報(bào)表設(shè)計(jì)器里集成了一個(gè)第三方的表格插件，在前端tfp頁(yè)面設(shè)計(jì)器里，還沒(méi)有提供表格定位相應(yīng)的容器組件，未來(lái)會(huì)提供。（現(xiàn)有的可編輯表格和數(shù)據(jù)表格不是用來(lái)為其他組件提供定位的，所以不能算作是表格定位的容器組件）
5. 彈性定位
彈性定位又叫彈性布局，這種定位方式最大的特點(diǎn)就是可以讓子元素的大小可以根據(jù)父元素的大小自動(dòng)擴(kuò)張或收縮，從而可以做到自動(dòng)適應(yīng)不同終端的屏幕尺寸，或者在用戶改變?yōu)g覽器窗口大小時(shí)自動(dòng)伸縮。
這種定位方式需要先將一個(gè)父元素的CSS屬性display設(shè)置為flex，然后該元素里的子元素即可實(shí)現(xiàn)彈性定位。
采用彈性定位的容器元素可以設(shè)置以下CSS樣式：
元素排列方向（flex-direction）：用來(lái)設(shè)置子元素的排列方向，有四種方式可以選擇：從左到右顯示（row）、從右到左顯示（row-reverse）、從上到下顯示（column）、從下到上顯示（column-reverse）。
元素水平對(duì)齊方式（justify-content）：用來(lái)設(shè)置子元素在水平方向的對(duì)齊方式，可以選左對(duì)齊（flex-start）、右對(duì)齊（flex-end）、居中對(duì)齊（center）、兩端對(duì)齊（space-between）和等距對(duì)齊（space-around）。
元素垂直對(duì)齊方式（align-items）：用來(lái)設(shè)置子元素在垂直方向的對(duì)齊方式，可以選頂部對(duì)齊（flex-start）、底部對(duì)齊（flex-end）、居中對(duì)齊（center）、基線對(duì)齊（baseline）、自動(dòng)伸展（stretch）。
內(nèi)容整體對(duì)齊方式（align-content）：當(dāng)有多行子元素時(shí)，可以用該屬性設(shè)置全部子元素整體的垂直對(duì)齊方式，包括自動(dòng)拉伸（stretch）、在容器的頂部排列（flex-start）、在容器的底部排列（flex-end）、在容器內(nèi)居中排列（center）、均勻分布，上下靠邊（space-between）、均勻分布，每行等距（space-around）。
元素是否自動(dòng)換行（flex-wrap）：用來(lái)設(shè)置子元素是否自動(dòng)換行。
彈性定位容器內(nèi)的子元素可以設(shè)置以下CSS樣式：
擴(kuò)展量（flex-grow）：必須參數(shù)，用來(lái)設(shè)置當(dāng)前元素相對(duì)于其他元素的增長(zhǎng)量，默認(rèn)值為 0，即如果存在剩余空間，也不自動(dòng)放大。
如果所有元素的擴(kuò)展量都設(shè)置為1，將等分剩余空間。如果一個(gè)元素的擴(kuò)展量設(shè)置為2，其他元素都為1，則前者占據(jù)的剩余空間將是其他項(xiàng)的2倍，如下圖所示：
收縮量（flex-shrink）：必須參數(shù)，用來(lái)設(shè)置當(dāng)彈性容器空間不足時(shí)，該元素相對(duì)于其他元素的收縮量，默認(rèn)值為 1。如果所有元素的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)元素的flex-shrink屬性為0，其他元素都為1，則空間不足時(shí)，前者不縮小。
基準(zhǔn)長(zhǎng)度（flex-basis）：必須參數(shù)，元素的基準(zhǔn)長(zhǎng)度定義了父容器在分配多余空間之前，當(dāng)前元素占據(jù)的主軸空間（main size，如果是橫向排列，則指父容器在水平方向的空間，如果是縱向排列，則指父容器在垂直方向的空間）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。合法值為 auto（默認(rèn)值，表示根據(jù)其他情況自動(dòng)伸縮），或者以具體的值加 "%"、"px"等單位的形式，表示該元素將占據(jù)固定空間。
顯示順序（order）：屬性用來(lái)設(shè)置元素在容器中出現(xiàn)的順序，您可以通過(guò)具體的數(shù)值來(lái)定義元素在容器中的位置，默認(rèn)值為 0。下圖所示的四個(gè)普通的面板組件，在彈性面板里從左至右的正常插入順序是panel1、panel2、panel3、panel4，但通過(guò)設(shè)置這四個(gè)面板的顯示順序，將panel1和panel4的顯示位置進(jìn)行了調(diào)換。
對(duì)齊方式（align-self）：該屬性允許您為某個(gè)特定的元素設(shè)置不同于其它元素的對(duì)齊方式，該屬性可以覆蓋父容器組件（彈性面板）里的垂直對(duì)齊屬性的值。該屬性的可選頂部對(duì)齊（flex-start）、底部對(duì)齊（flex-end）、居中對(duì)齊（center）、基線對(duì)齊（baseline）、自動(dòng)伸展（stretch）。
由于彈性定位的自動(dòng)伸縮特性，且易于實(shí)現(xiàn)子元素的水平和垂直對(duì)齊，目前很多主流的前端UI框架都大量地采用了該定位方式。
SS 有兩個(gè)最重要的基本屬性，前端開(kāi)發(fā)必須掌握：display和position。
display屬性指定網(wǎng)頁(yè)的布局。兩個(gè)重要的布局，我已經(jīng)介紹過(guò)了：彈性布局flex[1]和網(wǎng)格布局grid[2]。
本文介紹非常有用的position屬性。我希望通過(guò)10分鐘的閱讀，幫助大家輕松掌握網(wǎng)頁(yè)定位，說(shuō)清楚瀏覽器如何計(jì)算網(wǎng)頁(yè)元素的位置，尤其是新引進(jìn)的sticky定位。
本文由國(guó)內(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屬性用來(lái)指定一個(gè)元素在網(wǎng)頁(yè)上的位置，一共有5種定位方式，即position屬性主要有五個(gè)值。
?
static?relative?fixed?absolute?sticky
下面就依次介紹這五個(gè)值。最后一個(gè)sticky是2017年瀏覽器才支持的，本文將重點(diǎn)介紹。
static是position屬性的默認(rèn)值。如果省略position屬性，瀏覽器就認(rèn)為該元素是static定位。
這時(shí)，瀏覽器會(huì)按照源碼的順序，決定每個(gè)元素的位置，這稱為“正常的頁(yè)面流”（normal flow）。每個(gè)塊級(jí)元素占據(jù)自己的區(qū)塊（block），元素與元素之間不產(chǎn)生重疊，這個(gè)位置就是元素的默認(rèn)位置。
注意，static定位所導(dǎo)致的元素位置，是瀏覽器自主決定的，所以這時(shí)top、bottom、left、right這四個(gè)屬性無(wú)效。
relative、absolute、fixed這三個(gè)屬性值有一個(gè)共同點(diǎn)，都是相對(duì)于某個(gè)基點(diǎn)的定位，不同之處僅僅在于基點(diǎn)不同。所以，只要理解了它們的基點(diǎn)是什么，就很容易掌握這三個(gè)屬性值。
這三種定位都不會(huì)對(duì)其他元素的位置產(chǎn)生影響，因此元素之間可能產(chǎn)生重疊。
relative表示，相對(duì)于默認(rèn)位置（即static時(shí)的位置）進(jìn)行偏移，即定位基點(diǎn)是元素的默認(rèn)位置。
它必須搭配top、bottom、left、right這四個(gè)屬性一起使用，用來(lái)指定偏移的方向和距離。
div {position: relative;top: 20px;}
上面代碼中，div元素從默認(rèn)位置向下偏移20px（即距離頂部20px）。
absolute表示，相對(duì)于上級(jí)元素（一般是父元素）進(jìn)行偏移，即定位基點(diǎn)是父元素。
它有一個(gè)重要的限制條件：父元素不能是static定位，否則定位基點(diǎn)就會(huì)變成整個(gè)網(wǎng)頁(yè)的根元素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)是父元素，相對(duì)于父元素的頂部向下偏移20px。如果父元素是static定位，上例的子元素就是距離網(wǎng)頁(yè)的頂部向下偏移20px。
注意，absolute定位的元素會(huì)被“正常頁(yè)面流”忽略，即在“正常頁(yè)面流”中，該元素所占空間為零，周邊元素不受影響。
fixed表示，相對(duì)于視口（viewport，瀏覽器窗口）進(jìn)行偏移，即定位基點(diǎn)是瀏覽器窗口。這會(huì)導(dǎo)致元素的位置不隨頁(yè)面滾動(dòng)而變化，好像固定在網(wǎng)頁(yè)上一樣。
它如果搭配top、bottom、left、right這四個(gè)屬性一起使用，表示元素的初始位置是基于視口計(jì)算的，否則初始位置就是元素的默認(rèn)位置。
div {position: fixed;top: 0;}
上面代碼中，div元素始終在視口頂部，不隨網(wǎng)頁(yè)滾動(dòng)而變化。
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)頁(yè)的搜索工具欄，初始加載時(shí)在自己的默認(rèn)位置（relative定位）。
頁(yè)面向下滾動(dòng)時(shí)，工具欄變成固定位置，始終停留在頁(yè)面頭部（fixed定位）。
等到頁(yè)面重新向上滾動(dòng)回到原位，工具欄也會(huì)回到默認(rèn)位置。
sticky生效的前提是，必須搭配top、bottom、left、right這四個(gè)屬性一起使用，不能省略，否則等同于relative定位，不產(chǎn)生“動(dòng)態(tài)固定”的效果。原因是這四個(gè)屬性用來(lái)定義“偏移距離”，瀏覽器把它當(dāng)作sticky的生效門檻。
它的具體規(guī)則是，當(dāng)頁(yè)面滾動(dòng)，父元素開(kāi)始脫離視口時(shí)（即部分不可見(jiàn)），只要與sticky元素的距離達(dá)到生效門檻，relative定位自動(dòng)切換為fixed定位；等到父元素完全脫離視口時(shí)（即完全不可見(jiàn)），fixed定位自動(dòng)切換回relative定位。
請(qǐng)看下面的示例代碼。（注意，除了已被淘汰的 IE 以外，其他瀏覽器目前都支持sticky。但是，Safari 瀏覽器需要加上瀏覽器前綴-webkit-。）
#toolbar {position: -webkit-sticky; /* safari 瀏覽器 */position: sticky; /* 其他瀏覽器 */top: 20px;}
上面代碼中，頁(yè)面向下滾動(dòng)時(shí)，#toolbar的父元素開(kāi)始脫離視口，一旦視口的頂部與#toolbar的距離小于20px（門檻值），#toolbar就自動(dòng)變?yōu)?code>fixed定位，保持與視口頂部20px的距離。頁(yè)面繼續(xù)向下滾動(dòng)，父元素徹底離開(kāi)視口（即整個(gè)父元素完全不可見(jiàn)），#toolbar恢復(fù)成relative定位。
sticky定位可以實(shí)現(xiàn)一些很有用的效果。除了上面提到“動(dòng)態(tài)固定”效果，這里再介紹兩個(gè)。
堆疊效果（stacking）指的是頁(yè)面滾動(dòng)時(shí)，下方的元素覆蓋上方的元素。下面是一個(gè)圖片堆疊的例子，下方的圖片會(huì)隨著頁(yè)面滾動(dòng)，覆蓋上方的圖片（查看 demo[5]）。
HTML 代碼就是幾張圖片。
<div><img src="pic1.jpg"></div><div><img src="pic2.jpg"></div><div><img src="pic3.jpg"></div>
CSS 代碼極其簡(jiǎn)單，只要兩行。
div {position: sticky;top: 0;}
它的原理是頁(yè)面向下滾動(dòng)時(shí)，每張圖片都會(huì)變成fixed定位，導(dǎo)致后一張圖片重疊在前一張圖片上面。詳細(xì)解釋可以看這里[6]。
大型表格滾動(dòng)的時(shí)候，表頭始終固定，也可以用sticky實(shí)現(xiàn)（查看 demo[7]）。
CSS 代碼也很簡(jiǎn)單。
th {position: sticky;top: 0;}
需要注意的是，sticky必須設(shè)在<th>元素上面，不能設(shè)在<thead>和<tr>元素，因?yàn)檫@兩個(gè)元素沒(méi)有relative定位，也就無(wú)法產(chǎn)生sticky效果。詳細(xì)解釋可以看這里[8]。
（正文完）
初學(xué)者剛接觸前端，往往會(huì)被一大堆技術(shù)名詞、框架和工具，搞得眼花繚亂。
到底哪些技術(shù)是目前的主流技術(shù)棧，既能用于公司的開(kāi)發(fā)實(shí)務(wù)，又能為自己的簡(jiǎn)歷增添亮點(diǎn)？
下面就是一套目前主流的前端技術(shù)棧。
（1）Node.js：服務(wù)器端的 JavaScript 運(yùn)行環(huán)境，不管哪種前端開(kāi)發(fā)，都必不可少的底層環(huán)境。
（2）Webpack：語(yǔ)法轉(zhuǎn)換工具，把 ES6/TypeScript/JSX 語(yǔ)法轉(zhuǎn)成瀏覽器可以運(yùn)行的代碼。
（3）Koa2：一個(gè)非常流行、簡(jiǎn)潔強(qiáng)大的 Node.js 后端的 Web 開(kāi)發(fā)框架。
（4）MongoDB：目前應(yīng)用最廣泛的非關(guān)系數(shù)據(jù)庫(kù)之一，功能豐富，用法較簡(jiǎn)單。
（5）Vue 全家桶：
?Vue：前端基礎(chǔ)框架?Vuex：配套的前端狀態(tài)管理庫(kù)。?Vue Router：官方的路由插件，構(gòu)建單頁(yè)面應(yīng)用必不可少。?Vue CLI：腳手架工具，幫你快速上手 Vue 開(kāi)發(fā)，無(wú)需再花多余時(shí)間去實(shí)現(xiàn)項(xiàng)目架構(gòu)。?Vant：有贊前端團(tuán)隊(duì)開(kāi)發(fā)的輕量級(jí)移動(dòng)端 Vue 組件庫(kù)，讓你快速使用已經(jīng)封裝好的各種頁(yè)面組件。
看到這個(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+，有超過(guò)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://dev.to/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/
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
