position:sticky粘性定位與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).瀏覽器兼行當前有點差,不過以后肯定會越來越好。
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.cqetom.live/" /> 
<title>CSS position:sticky與position:fixed區別</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">51前端</div>
    <div class="fixed">51前端</div>
  </div>
</body>
</html>
可以拖動滾動條測試效果,代碼分析如下:
(1).fixed元素始終固定于top屬性指定的位置。
(2).sticky元素則是到達top屬性指定的位置才會固定。
(3).上述兩個代碼的定位都是以當前視口包含塊為參考。
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.cqetom.live/" /> 
<title>51前端</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">51前端</div>
  </div>
</div>
</body>
</html>
sticky元素的定位參考對象不但可以是視口包含塊,也可以是距離其最近的overflow屬性值visible的最近父元素。
但是fixed元素始終以視口包含塊為定位參考對象,不要認為是以距離其最近的定位元素或者視口包含塊為參考。

代碼描述:CSS position sticky position:fixed,CSS position:sticky與position:fixed區別



50 66



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: js js代碼 js實例 javascript javascript代碼 javascript實例 jshtml對象 javascripthtml對象
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子