position屬性中最有意思的就是sticky了，設定了sticky的元素，在螢幕範圍（viewport）時該元素的位置並不受到定位影響（設定是top、left等屬性無效），當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設定的left、top等屬性成固定位置的效果。該元素並不脫離文件流，仍然保留元素原本在文件流中的位置。
當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設定了top: 50px，那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動。
元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那麼是相對於viewport來計算元素的偏移量
比較蛋疼的是這個屬性的相容性還不是很好，目前仍是乙個試驗性的屬性，並不是w3c推薦的標準。它之所以會出現，也是因為監聽scroll事件來實現粘性布局使瀏覽器進入慢滾動的模式，這與瀏覽器想要通過硬體加速來提公升滾動的體驗是相悖的。
具體情況可以看下圖，基本上可以說這個屬性使用的瀏覽器只有firefox和ios的safari
簡單的說，要讓sticky屬性生效的條件有以下兩點：
- 乙個是元素自身在文件流中的位置
- 另乙個是該元素的父容器的邊緣
第一點上面已經講過了，如果設定了top: 50px，那麼元素在達到距離頂部50px時才會發生定位，否則並不會發生定位。
第二點則需要考慮父容器的高度情況：sticky元素在到達父容器的底部時，則不會再發生定位，如果父容器高度並沒有比sticky元素高，那麼sticky元素一開始就達到了底部，並不會有定位的效果。
/*=== iphonex相容 start ===*/
.box_sticky
/*== ios11.2 以下用constant ==*/
@media screen and (-webkit-device-pixel-ratio:3) and (device-width:375px) and (device-height:812px)
/*== ios11.2 ==用env*/
.body_ios_hybrid
/*=== iphonex相容 end ===*/
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...
css3 新增屬性
background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...
Css3新增屬性
1.新增邊框屬性 box shadow 實現邊框陰影 屬性值有 模糊度 x軸偏移y軸偏移 color 陰影顏色 border radius 實現圓角邊框 屬性值越大角度越大 border image 實現邊框 border image source slice width outset repeat...