這兩周在做一個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?可以用來粘住任何一個你想要的元素，是一個特別有意思的屬性，可以省下很多功夫。有空可以來嘗試一下，真的很有意思。

?

轉載于:https://www.cnblogs.com/katydids/p/11172391.html

總結

以上是生活随笔為你收集整理的position粘性定位sticky的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。