發現了好東西
簡介：position:sticky是css定位新增屬性；可以說是static（沒有定位） 和固定定位fixed 的結合；它主要用在對scroll 事件的監聽上；簡單來說，在滑動過程中，某個元素距離其父元素的距離達到sticky黏性定位的要求時(例如top：100px)；position:sticky這時的效果相當於fixed定位，固定到適當位置
講sticky 定位之前，先說一下position 的其他定位，
absolute： 生成絕對定位的元素，相對於static 定位以外的第一個父元素進行定位。元素的位置透過"left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed： 產生固定定位的元素，相對於瀏覽器視窗進行定位（舊IE不支援），元素的位置透過"left", "top", "right" 以及"bottom" 屬性進行規定。
relative： 產生相對定位的元素，相對於其正常位置進行定位，不脫離文件流。
static：
預設值，沒有定位，元素出現在正常的文件流中（忽略 top, bottom, left, right 或
z-index 宣告）。 inherit規定應該從父元素繼承 position 屬性的值。
sticky的使用：
#sticky-nav {
position: sticky;
top: 100px;
}設定position:sticky 同時給予一個(top,bottom,right,left) 之一即可
使用條件：
父元素不能overflow:hidden或overflow:auto屬性。
必須指定top、bottom、left、right4個值之一，否則只會處於相對定位
父元素的高度不能低於sticky元素的高度
sticky元素僅在其父元素內生效
專案中的坑
問題描述：
在一個小程式開發專案中；tabs元件使用了黏性定位，其中有tab欄的切換；tab欄底部是大段列表內容list-container內容的展示；其中展示內容有click事件(或者說是touch事件);ios以及pc瀏覽器中對點擊的測試是正常的；但在安卓手機中！ ！ ！ ！我的天，點擊穿透了！ ！而且，試著去掉list-container中的item的點擊跳轉，發現tab切換的點擊沒有了反應，事件消失了！ ！ ！設定斷點，查看事件流的走向：首先事件捕獲-->目標節點tab-->事件冒泡；這個泡居然冒到了container-list中的item。 。 。簡直噩夢大致的專案結構：
html結構：
<div class="service-wrap">
<tab>这是tab切换</tab>
<div class="list-container">
<!--for循环有很多item-->
<item></item>
<item></item>
</div>
</div>解決方法:
在使用元件庫的tab時，外層套用一個div，防止點擊穿透和不正常的事件流走向或（一個治標不治本的方法，具體看業務場景）
.組件庫的樣式無法改，sticky作為tab組件的行內樣式，因為我使用這個tab時是直接在viewpoint的頂部的，這是完全可以用fixed達到效果。我在呼叫類別的外部設定了position:fixed !import；樣式最高優先權去覆蓋了元件庫中的定位樣式，就正常了。
以上是CSS 黏性定位 sticky 詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
