甜品网站首页设计,杭州拱墅区网站建设,天津百度推广排名优化,制作静态网站制作1. 大白话解释sticky定位
粘性定位通俗来说#xff0c;它就是相对定位relative和固定定位fixed的结合体#xff0c;它的触发过程分为三个阶段
在最近可滚动容器没有触发滑动之前#xff0c;sticky盒子的表现为相对定位relative【第一阶段】#xff0c;
但当最近可滚动容…1. 大白话解释sticky定位
粘性定位通俗来说它就是相对定位relative和固定定位fixed的结合体它的触发过程分为三个阶段
在最近可滚动容器没有触发滑动之前sticky盒子的表现为相对定位relative【第一阶段】
但当最近可滚动容器触发滚动父元素出现在最近可滚动容器的可视区并且滚动距离达到粘性定位sticky的要求时比如top: 100pxsticky盒子的表现为固定定位fixed【第二阶段】
接着滚动当sticky盒子的父元素消失在最近可滚动容器的可视区时sticky盒子会重新表现为相对定位relative【第三阶段】
也就是说它不再固定会随着父元素消失在最近可滚动容器的可视区。
结合上面的描述我们可以总结粘性定位的位置受两个东西的影响
父元素父盒子不在最近可滚动容器可视区时sticky盒子始终表现为相对定位。最近可滚动的容器设置sticky时使用的top、left等属性是相对的就是可滚动的容器只要容器的overflow不是visible【容器不设置overflow就默认是visible】那么容器就是可滚动容器如果盒子的祖先们没找到可滚动容器那么body就作为可滚动容器因为body是默认可滚动的。
2. 代码体会sticky定位
下面我们结合代码来理解
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlemargin重叠问题/titlestyle* {padding: 0;margin: 0;}.parent {width: 400px;height: 600px;background-color: tomato;overflow: visible;}.sticky {width: 200px;height: 200px;background-color: gold;/* 粘性定位 */position: sticky;top: 0px;}.box-top,.box-bot {width: 400px;background-color: pink;}.box-top {height: 200px;}.box-bot {height: 1000px;}/style
/headbodydiv classbox-top/divdiv classparentdiv classsticky吸顶盒子/div/divdiv classbox-bot/div
/body/html3. sticky生效的情况
sticky失效情况有
未指定top、right、bottom或left其中的一个父元素的高度小于sticky元素没有找准sticky元素需要参考的最近可滚动元素如果参考的可滚动元素是body那么父元素的overflow必须是visible不能是其他任意值
参考博客positionsticky失效问题剖析
参考视频粘性定位
