css 的position屬性定義建立元素布局所用的定位機制。
任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。
取值：relative|absolute|fixed|sticky
relative、
absolute、
fixed
這三個屬性值有乙個共同點，都是
相對於某個基點的定位。
(這三種定位都不會對其他元素的位置產生影響，因此
元素之間可能產生重疊。)
relative表示，相對於預設位置（即static時的位置）進行偏移，即定位基點是元素的預設位置。
它必須搭配top、bottom、left、right這四個屬性一起使用，用來指定偏移的方向和距離。
absolute表示，相對於上級元素（一般是父元素）進行偏移，即定位基點是父元素。
它有乙個重要的限制條件：定位基點（一般是父元素）不能是static定位，否則定位基點就會變成整個網頁的根元素html。
absolute定位也必須搭配top、bottom、left、right這四個屬性一起使用。
（注意，absolute定位的元素會被"正常頁面流"忽略，即在"正常頁面流"中，該元素所佔空間為零，周邊元素不受影響。）
fixed表示，相對於視口（viewport，瀏覽器視窗）進行偏移，即定位基點是瀏覽器視窗。這會導致元素的位置不隨頁面滾動而變化，好像固定在網頁上一樣。
它如果搭配top、bottom、left、right這四個屬性一起使用，表示元素的初始位置是基於視口計算的，否則初始位置就是元素的預設位置。
sticky跟前面四個屬性值都不一樣，它會產生動態效果，很像 relative 和 fixed 的結合：一些時候是 relative 定位（定位基點是自身預設位置），另一些時候自動變成 fixed 定位（定位基點是視口）。
因此，它能夠形成"動態固定"的效果。比如，網頁的搜尋工具欄，初始載入時在自己的預設位置（relative定位）。
頁面向下滾動時，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）。
等到頁面重新向上滾動回到原位，工具欄也會回到預設位置。
sticky生效的前提是，必須搭配 top、bottom、left、right 這四個屬性一起使用，不能省略，否則等同於relative定位，不產生"動態固定"的效果。
原因是這四個屬性用來定義"偏移距離"，瀏覽器把它當作sticky的生效門檻。
它的具體規則是，當頁面滾動，父元素開始脫離視口時（即部分不可見），只要與sticky元素的距離達到生效門檻，relative定位自動切換為fixed定位；等到父元素完全脫離視口時（即完全不可見），fixed定位自動切換回relative定位。
請看下面的示例**。（注意，除了已被淘汰的 ie 以外，其他瀏覽器目前都支援sticky。但是，safari 瀏覽器需要加上瀏覽器字首-webkit-。）
#*******上面**中，頁面向下滾動時，#*******的父元素開始脫離視口，一旦視口的頂部與#*******的距離小於20px（門檻值），#*******就自動變為fixed定位，保持與視口頂部20px的距離。頁面繼續向下滾動，父元素徹底離開視口（即整個父元素完全不可見），#*******恢復成relative定位。
本文參考自：阮一峰大大—css 定位詳解
CSS基礎 浮動與定位
1 浮動 float float 引數 none 預設 無浮動 left 左浮動 right 右浮動 2 清除浮動 clear clear 引數none 無效果 left 清除右浮動 right 清除右浮動 both 擴充父元素2.定位 position 引數 static 靜態定位 relativ...
HTML與CSS基礎之CSS定位
值 語義static 靜態定位 relative 相對定位 absolute 絕對定位 fixed 固定定位 邊偏移屬性 示例描述 toptop 80px 頂端偏移量，定義元素相對於其父元素上邊線的距離 bottom bottom 80px 底部偏移量，定義元素相對與其父元素下邊線的距離 left ...
CSS頁面布局基礎2 定位
1 四種定位型別 通過position屬性指定分別是static 預設值 relative absolute fixed static 靜態定位 表示按照正常定位方案，元素盒按照在文件流中出現的順序依次格式化 relative 相對定位 將移動元素盒，但是它在文件流中的原始空間會保留下來。absol...