CSS position:sticky与position:fixed区别

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.51qianduan.com/" /> 
<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.51qianduan.com/" /> 
<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区别

下载全部收藏

599 799

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

月映东窗

作品：41 | 粉丝：21

关注

TA的相关作品 >>更多

热搜关键词

CSS position:sticky与position:fixed区别

CSS 匹配指定name元素

@import与<link> 的区别

position:sticky定位元素是否在同一父元素中区别

JavaScript 获取第n个li元素

offsetwidth与style.width区别

checked属性值是true还是checked