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.cxvn.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">乐分享</div>
<div class="fixed">乐分享</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.cxvn.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元素始终以视口包含块为定位参考对象，不要认为是以距离其最近的定位元素或者视口包含块为参考。

1.《CSS position:sticky与position:fixed区别》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《CSS position:sticky与position:fixed区别》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/262.html