這兩周在做一個service后台的需求，有一個很有意思的事情，左側要有各種顏色柱，每一種顏色柱代表一個身份，例如黃色代表本人，藍色代表配偶，綠色代表女兒等等。。。需求中因為可能一個人的信息太多，瀏覽器的一屏展示不下，而使得用戶不知道自己看的是誰的信息還要滾動頁面，交互是不好的，所以要求要在內容區域滾動的時候，代表身份的本人兩字一直吸頂。圖如下:
發現了css定位的sticky ，對於css重新進行了認識
發現position不止有常用的static、relative、absolute和fixed ， 還有一些有意思的例如sticky
static：靜態定位
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative ：相對定位
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
absolute：絕對定位
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed：固定定位
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
inherit：
規定應該從父元素繼承 position 屬性的值。
unset：
當前屬性可繼承則繼承
initial：
設置該屬性為默認值
最后說一下sticky ——粘性定位這個磨人的小妖精
粘性定位，該定位基於用戶滾動的位置。
它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
一開始並不是所有的瀏覽器都支持，后來發現現在居然支持了。。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下實例)。
sticky 可以用來粘住任何一個你想要的元素，是一個特別有意思的屬性，可以省下很多功夫。有空可以來嘗試一下，真的很有意思。