目录
一、粘性定位 sticky
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
语法：
选择器 { position: sticky; top: 10px; }sticky能够形成”动态固定”的效果。比如，百度新闻首页的导航栏，初始加载时在自己的默认位置（relative定位）
相对定位
![粘性定位怎么用_什么是失粘[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/a3d15f8e3a584177a880c4ff3a441dfc.png "粘性定位怎么用_什么是失粘[通俗易懂]插图")
滚动条下滑变成固定定位![粘性定位怎么用_什么是失粘[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/023569f1a6de48799bbb407230b713bf.png "粘性定位怎么用_什么是失粘[通俗易懂]插图2")
页面滚回去又会变成想对定位
二、粘性定位特点
-
以浏览器的可视窗口为参照点移动元素（固定定位特点）
-
粘性定位占有原先的位置（相对定位特点）
-
必须添加 top 、left、right、bottom 其中一个才有效
三、粘性定位实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 2000px;
width: 100%;
background-color: skyblue;
}
.box1 {
width: 80%;
height: 100px;
background-color: teal;
margin: 0 auto;
}
.box2 {
width: 200px;
height: 600px;
background-color: pink;
top: 0;
margin: 0 auto;
}
.sticky {
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2 sticky"></div>
<div class="box1"></div>
</div>
</body>
</html>打开页面 box2 相对定位
![粘性定位怎么用_什么是失粘[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/982e4566252947228f63ddd1758df16a.png "粘性定位怎么用_什么是失粘[通俗易懂]插图4")
滑动页面 box2 变成绝对定位
![粘性定位怎么用_什么是失粘[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/b53d6ef89729447f8cb7066c1ab84cd8.png "粘性定位怎么用_什么是失粘[通俗易懂]插图6")
四、粘性定位为什么不起作用
有时候设置会发现粘性定位不起作用，又找不到原因，可以看看有没有以下几点原因：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
今天的文章粘性定位怎么用_什么是失粘[通俗易懂]分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/71893.html
