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区别



59 79



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 jshtml对象 javascripthtml对象
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到