position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
例如：
主要代码：
position: sticky;
position: -webkit-sticky;
top: 20px;全部代码
<!DOCTYPE html>
<html>
<head>
<title>flex</title>
<style type="text/css">
.box{
width: 800px;
margin: 0px auto;
height: 2000px;
background-color: #ccc;
}
.left{
width: 50px;
height: 100px;
position: sticky;
position: -webkit-sticky;
background-color: red;
float: left;
margin-left: -50px;
margin-top: 200px;
top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
</div>
</body>
</html>
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
