本文详细解析了CSS中的粘性定位（sticky position）特性，通过实例展示了其在页面滚动时如何固定元素。关键点包括：粘性定位元素以最近具有滚动条的父元素或视口为参考对象；当达到设定距离时，元素会变为固定位置，但不会超出其直接父元素的范围。此外，由于这个限制，粘性定位的多个元素不会相互覆盖。
51前端
.container {
background: #eee;
width: 400px;
height: 1000px;
margin: 120px auto;
}
.sticky {
position: sticky;
height: 60px;
line-height: 60px;
background: #ccc;
top: 50px;
}
section{
max-width: 600px;
margin-bottom: 30px;
overflow:visible;
}
p{color:green}
div {
font-size: 30px;
text-align: center;
color: #fff;
}
51前端一
CSS教程
51前端二
CSS教程
51前端三
CSS教程
51前端四
CSS教程
大家可以拖动滚动条查看定位效果，代码分析如下：
(1).粘性定位元素分别位于各自的父元素下。
(2).现在拖动滚动条，认真观察效果会发现如下几个特点。
(3).首先，top、bottom、left和right属性定位参考是以距离它最近的具有滚动条父元素为定位参考对象，如果是页面出现滚动条，则以视口包含块为定位参考对象，所以当拖动滚动条时，距离视口顶部50px的时候，粘性定位元素会固定。
(4).但是粘性定位元素的固定范围不会超出它的直接父元素，也就是不会超出它所在的红框。
(5).正是由于上面的原因，粘性定位的div元素之间不会覆盖在一起，因为受限于它们的直接父元素。
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
