CSS 黏性定位 sticky 詳解

發現了好東西

簡介：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；樣式最高優先權去覆蓋了元件庫中的定位樣式，就正常了。

推薦教學：《PHP教學》《CSS教學》

以上是CSS 黏性定位 sticky 詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！