CSS粘滞定位:页面滑动到某位置时使其固定不动,随父元素结束解除固定

只需使用position: sticky即可实现

    position: sticky;
    top: 0px;

需要注意的是:

父元素不能有overflow:hidden或者overflow:auto属性;

必需指定top、bottom、left、right这4个值之一,否则只会处于相对定位;

父元素的高度不能低于sticky元素的高度;

sticky元素仅在其父元素内生效。

当position: sticky的父元素低于子元素中position: sticky时,固定会随着父元素的高度结束而自动解除,详细请查看下方DEMO

 

运行DEMO

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容