CSS position:sticky與position:fixed 區別

admin發表於2018-12-22
CSS

position:sticky粘性定位與position:fixed固定定位效果比較類似。

都可以在拖動滾動條的時候，將元素固定於指定位置，但是兩者的區別也是非常巨大的。

下面將通過程式碼例項詳細介紹一下它們兩者的區別，兩個定位方式基本用法參閱如下兩篇文章：

（1）.粘性定位參閱CSS position:sticky 粘性定位一章節。

（2）.固定定位參閱CSS position:fixed 固定定位一章節。

先總結一下兩種定位方式的特點，再進行對比總結和程式碼演示。

一.固定定位：

（1）.元素可以被固定於頁面指定位置，始終固定於此位置。

（2）.定位位置可以通過top、bottom、left與right屬性設定。

（3）.如果屬性同時設定，那麼top的優先順序高於bottom，left的優先順序高於right。

（4）.top、bottom、left與right無需顯式設定，fixed定位也會生效。

（5）.元素的定位參考物件是當前視口包含塊，不要誤以為是距離其最近的定位元素。

（6）.元素脫離文件流。

（7）.當前所有主流瀏覽器都支援此定位方式（不再考慮IE6瀏覽器）

二.粘性定位：

（1）.元素可以被固定於頁面指定位置，但並不一定始終固定於此位置。

（2）.定位位置可以通過top、bottom、left與right屬性設定，但是此位置是一個臨界值，也就是說元素只有達到設定的這個臨界值才會固定，其他位置並不會固定。

（3）.如果屬性同時設定，那麼top的優先順序高於bottom，left的優先順序高於right。

（4）.必須至少顯式設定top、bottom、left與right其中某一個屬性值，sticky定位才會生效。

（5）.元素的定位參考物件距離其最近的overflow屬性值為visible的具有滾動條的祖先元素，如果是以body或者body的父輩元素為參考，那麼定位參考物件是視口包含塊。

（6）.元素不會脫離文件流。

（7）.瀏覽器兼行當前有點差，不過以後肯定會越來越好。

關於視口包含塊在CSS position:fixed 固定定位一章節中後部分有介紹。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
.container {
  background: #eee;
  width: 400px;
  height: 1000px;
  margin: 120px auto;
}
.sticky ,.fixed{
  height: 60px;
  line-height: 60px;
  margin-bottom: 30px;
  top:50px;
}
.sticky{
  position: sticky;
  background: green;
}
.fixed{
  position: fixed;
  background:blue;
}
</style>
</head>
<body>
  <div class="container">
    <div class="sticky">螞蟻部落</div>
    <div class="fixed">螞蟻部落</div>
  </div>
</body>
</html>

可以拖動滾動條測試效果，程式碼分析如下：

（1）.fixed元素始終固定於top屬性指定的位置。

（2）.sticky元素則是到達top屬性指定的位置才會固定。

（3）.上述兩個程式碼的定位都是以當前視口包含塊為參考。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
#box{
  width:500px;
  height:500px;
  overflow:auto;
  margin:100px;
}
.container {
  background: #eee;
  width: 400px;
  height: 1000px;
  margin: 120px auto;
}
.sticky{
  height: 60px;
  line-height: 60px;
  position:sticky;
  background-color:green;
  margin-bottom: 30px;
  top:50px;
}
</style>
</head>
<body>
<div id="box">
  <div class="container">
    <div class="sticky">螞蟻部落</div>
  </div>
</div>
</body>
</html>

sticky元素的定位參考物件不但可以是視口包含塊，也可以是距離其最近的overflow屬性值visible的最近父元素。

但是fixed元素始終以視口包含塊為定位參考物件，不要認為是以距離其最近的定位元素或者視口包含塊為參考。

相關文章