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的粘性的效果（可以不隨滾動而消失在視口）。
position屬性sticky和fixed的區別比較