這篇文章給大家分享的是有關css粘性定位position：sticky的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設、做網(wǎng)站與策劃設計,華坪網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設10多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:華坪等地區(qū)。華坪做網(wǎng)站價格咨詢:18980820575

使用：

#sticky-nav {
position: sticky;
top: 100px;
}

設置position:sticky同時給一個(top,bottom,right,left)之一即可

使用條件：

1、父元素不能overflow:hidden或者overflow:auto屬性。

2、必須指定top、bottom、left、right4個值之一，否則只會處于相對定位

3、父元素的高度不能低于sticky元素的高度

4、sticky元素僅在其父元素內生效

例子：css代碼：

* {
            margin: 0;
            padding: 0
        }
        
        html body {
            height: 100vh;
            width: 100%
        }
        
        h2 {
            height: 200px;
            position: relative;
            background-color: lightblue;
        }
        
        h2:after {
            content: '';
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: red;
        }
        
        #sticky-nav {
            position: sticky;
            /*position: absolute;*
            left: 0;*/
            top: 100px;
            width: 100%;
            height: 80px;
            background-color: yellowgreen;
        }
        
        .scroll-container {
            height: 600px;
            width: 100%;
            background-color: lightgrey;
        }

html代碼：

高200px;距頂部100px
    這是一個tab切換欄，給sticky定位top=100px