position屬性sticky和fixed的區別比較

position屬性之fixed

fixed總是以body為定位時的對象，總是根據瀏覽器窗口來進行元素的定位，通過left，right，top，bottom屬性進行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div{
        
                float: left;
                margin-right: 20px;
            }
            .div1{
                background-color: #FF0000;
                width: 10000px;
                height: 10000px;
                
            }
            .div2{
                background-color: #33FF66;
                width: 100px;
                height: 100px;
                position: fixed;
                left: 50px;
                top: 50px;
            }
            </style>
            
    </head>
    
    <body>
    <div class="div1">層1</div>
            <div class="div2">層2</div>
    </body>

</html>

在vscode上運行后

由于px設置夠大，網頁可以滾動

在拖動滾動條后，如下圖

我們可以發現隨著滾動條的下滑，層二的位置始終不變。這便是fixed屬性。

如果把層二div中 position：fixed；

left：50px；

top：50px；并且把層1塊的height設置得大一些（讓頁面有滾動的效果）

去掉，那么，層2將不會隨著滾動條的下滑而下滑，如下圖：

sticky

<!DOCTYPE html>
<html>
<head>

<title></title>
<style type="text/css">
.container {
    background: #eee;
    width: 600px;
    height: 1000px;
    margin: 0 auto;
}
.sticky-box {
   <!-- position: -webkit-sticky;
    position: sticky; -->
    height: 60px;
    margin-bottom: 30px;
    background:violet;
    <!--top: 0px;  -->
}

div {
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 60px;
}
</style>

</head>


<body>
<div class="container">
    <div class="sticky-box">內容1</div>
    <div class="sticky-box">內容2</div>
    <div class="sticky-box">內容3</div>
    <div class="sticky-box">內容4</div>
</div>
</body>

</html>

上圖html注釋掉 {

position： -webkit-sticky；

position： sticky；

top：0px；

}

運行后，效果如下圖：

可以看見效果和fixed是一樣的，隨著滾動條移動，圖形也跟著移動。

但是加上

{

position： -webkit-sticky；

position： sticky；

top：0px；

}

之后再運行，效果如下圖：

可以發現，注釋過的html運行后，內容板塊隨著滾動條的下移消失在視口。而沒有注釋的代碼“內容四”即使在滾動條下滑到最后都停留在視口的最上方。這就是fixed和sticky的屬性的區別了。

再有，因為設置的是top：0px；

讓我們改成top：100；運行后如下圖：

可以看見，滾動條即使下移到最下方，內容板塊也和視口頂部差100px；

sticky實驗總結：

top：0px；時，屬性和fixed相似。

top： px>0時，屬性加成relative。

------------------------------------------------------------------------------------------------------------完美分割線----------------------------------------------------------------------------------------------------------------

position：sticky；的生效規則：
1、必須指定top、right、bottom、left四個閾值的其中之一（比如本次sticky使用了top），才可使粘性定位生效。

2、到達設定的閾值。

比如本次sticky的閾值為top：0px；

top：0px；時sticky體現fixed的屬性。

top>0px 時 sticky還要加成relative的屬性。

------------------------------------------------------------------------------------又一完美分割線------------------------------------------------------------------------------------------

sticky和fixed的區別是：

sticky可以有fixed的滾動的效果，而fixed沒有sticky的粘性的效果（可以不隨滾動而消失在視口）。

posted @ 2018-10-28 22:35 楊超越的禿頭姐姐閱讀(4661) 評論(0) 收藏舉報

刷新頁面返回頂部

position屬性sticky和fixed的區別比較

公告