开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
position:sticky简介
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。今天重点说一下sticky属性
position:sticky曾经给chrome放弃过，现在又重新兼容回来。
position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixe
使用场景
业务开发中头部吸顶底部滚动的需求：标题在滚动的时候，会一直贴着最顶上
比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。按以前正常做法基本上是用JS + CSS 去配合实现
现在有了这个属性则可以直接实现
// css 部分
.container {
background-color: yellow;
height: 200px;
width: 140px;
overflow: auto;
}
.container div {
height: 20px;
background-color: hotpink;
border: 1px solid;
}
.container .header {
position: sticky;
top: 0;
background-color: red;
}
// html 部分
<div class="container">
<div class="header">Header</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
必须注意的点
设置了position:sticky的元素的效果完全受制于父级元素。
- 父级元素不能有任何overflow:visible以外的overflow设置。即使是scroll或者auto也不行。
- 父元素的高度不能低于sticky元素的高度
- 同一父容器中的sticky元素，如果定位置相等，则会发生重叠
sticky元素如果不属于相同父元素，但是他們的父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。- 必须设置
top,left,bottom,right其中一个，否则其行为与相对定位相同，并且top和bottom同时设置时，top的优先级高；left和right同时设置时，left的优先级高
浏览器兼容性
兼容性更新时间 【2022-12-06】
