说明

1、position的新属性sticky，在屏幕范围内(viewport)设置sticky元素时，该元素的位置不会受到定位的影响。

(设置为top、left等属性无效)，当该元素的位置将移出偏移范围时，定位又会变成fixed，并根据left、top等属性进行固定。

2、sticky属性解决了对象脱离常规流时下部对象瞬间偏移的问题。

就像relative和fixed的组合。

实例

.sticky {
    position: -webkit-sticky;
    position:    -moz-sticky;
    position:     -ms-sticky;
    position:         sticky;
    top: 1px;
}

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用HTML如何写横向滑动导航栏的效果

  这篇文章主要介绍了html5 横向滑动导航栏的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• webpack打包出现图片不显示怎样办？

  webpack打包出现图片不显示怎样办？一些朋友有遇到webpack打包后，图片路径不错不显示图片的情况，那么这时我们该怎样解决呢？下面我们一起来了解看看。

• CSS class与id常用命名有哪些，命名要注意什么

  网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，本文主要介绍了CSS的class与id常用的命名规则，感兴趣的可以了解一下

• 用CSS怎样做垂直居中的效果？教你一个特别的方法

  对于CSS怎样实现垂直居中的效果，我们之前也了解了很多方法，而不同的实现方法各有其优缺点，本文再给大家分享一个特别的CSS实现垂直居中的方法，感兴趣的朋友就继续往下看吧。

• CSS实现表格外边框加粗的代码是什么

  css设置表格外边框加粗的方法可以利用border属性设置table外边框的宽度，border 简写属性在一个声明设置所有的边框属性。