我之前對(duì)position定位屬性的了解僅限于absolute，relative，fixed，甚至以為relative就是用來給子級(jí)元素定位的。接下來就好好講一講你或許不知道但是確很常用，或者用的知其然，不知其所以然的地方。
position屬性其實(shí)一共有五個(gè)值：static、relative、absolute、fixed、sticky

一、static

static其實(shí)是position的默認(rèn)屬性，就是當(dāng)你沒有寫position屬性的屬性，瀏覽器默認(rèn)你的定位是position: static，這個(gè)時(shí)候元素還沒有脫離文檔流，元素與元素還沒有產(chǎn)生重疊，元素所在的位置就是按照布局默認(rèn)的位置。

二、relative

relative是相對(duì)定位，所謂的相對(duì)定位是相對(duì)于自身默認(rèn)所在的位置進(jìn)行偏移。
下面的代碼.box元素距離默認(rèn)位置30px(即向右偏移30px)。

.box{
  position: relative;
  left: 30px;
}

三、absolute

absolute是絕對(duì)定位，是相對(duì)于已定位的父元素進(jìn)行定位（即position屬性不是static的元素），如果父元素都沒有定位的話，會(huì)一直往上找，直到父元素定位屬性不是static的元素，如果一直找不到，就相對(duì)于body定位。所以這就有了為什么我們一般給父元素寫個(gè)relative的原因，其實(shí)父元素寫別的定位屬性也行，例如fixed、sticky、absolute，但是如果父元素是absolute，父元素就要繼續(xù)找他的已定位的父元素，不建議這樣寫，不太符合布局思想。
下面的代碼就是相對(duì)父元素偏移的基礎(chǔ)再偏移30px

<div class="parent">
  <div class="child"></div>
</div>

.parent{
  position: relative;
  left: 30px;
}
.child{
  position: absolute;
  left: 30px;
}

四、fixed

fixed是固定定位，定位基點(diǎn)是瀏覽器窗口，這會(huì)導(dǎo)致元素的位置不隨頁面滾動(dòng)而變化，好像固定在網(wǎng)頁上一樣。而且別忘了 position也可以相對(duì)于fixed的父元素定位哦。
下面代碼中，元素始終距離視口頂部50px，不隨網(wǎng)頁滾動(dòng)而變化。

div {
  position: fixed;
  top: 50px;
}

五、sticky

，它跟前面四個(gè)屬性值都不一樣，它會(huì)產(chǎn)生動(dòng)態(tài)效果，很像relative和fixed的結(jié)合：一些時(shí)候是relative定位（定位基點(diǎn)是自身默認(rèn)位置），另一些時(shí)候自動(dòng)變成fixed定位（定位基點(diǎn)是視口）。
一般瀏覽商城網(wǎng)頁的時(shí)候，你經(jīng)常看到搜索框離開視口的就變成了固定定位，等到頁面重新向上滾動(dòng)回到原位，搜索框也會(huì)回到默認(rèn)位置。

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

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

目前的瀏覽器基本都已支持，但是，Safari瀏覽器需要加上瀏覽器前綴-webkit-。

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

所以當(dāng)你再寫這種需求的時(shí)候，就不用寫一大堆的js代碼了，只要兩句css代碼就搞定了。

少看推文多看書，動(dòng)動(dòng)腦子動(dòng)動(dòng)手。
（當(dāng)然一些高質(zhì)量的博客還是可以看的，比如阮一峰的博客）
本文參考了阮一峰大神的博客，大神傳送門css定位詳解 - 阮一峰