position-sticky

时间：2023-03-30 23:23:35 CSS

position:stickyposition:sticky，粘性定位，从表达上来说，可以理解为相对定位和固定定位的结合，当元素在屏幕上时，就是相对的；当元素即将滚出屏幕时，它将被固定。使用粘性的分层滚动交互。HTML结构：测试标题1

测试内容测试内容测试内容测试内容测试内容测试内容1

测试评论测试评论测试评论测试评论测试评论测试评论测试评论1

测试标题2测试内容测试内容测试内容测试内容测试内容测试内容2测试评论测试评论测试评论测试评论测试评论测试评论测试评论2测试标题3测试内容测试内容测试内容测试内容测试内容3测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论3css部分：.container{width:600像素；高度：800px；溢出-y：自动；轮廓：1px纯红色；保证金：0自动；}。物品{宽度：100%；高度：600px；轮廓：1px纯红色；文本对齐：居中；/*溢出：自动；*/}.title{高度：40px；行高：40px；背景：红色；;定位：粘性；顶部：0；}.content{高度：460px；行高：460px；背景：黑色；白颜色;}.comment{高度：100px；：白色的;定位：粘性；底部：50vh；z-指数：-1；}页面效果sticky注意1sticky元素的父元素overflow不能有除visible以外的设置，否则不会有sticky效果2设置为sticky元素的父元素的高度不能和的高度一样粘性元素，否则不会有粘性效果3同一父元素中的粘性元素独立偏移，可能重叠；不同父元素中的粘性元素会挤压原元素，形成顺序占位的效果。sticky粘滞定位的计算规则是距离粘滞元素最近的可滚动元素的大小框。如果有left、top等，则可滚动元素的sizebox如right或down。左移，最高值粘性约束矩形粘性元素的父元素与流盒的重叠区域与position:sticky相同。左、右、上、下代表含义。例如：top:20px;流动框的顶部是最近的可滚动父元素top20px粘性效果什么时候开始？当粘性约束矩形顶部与流盒顶部距离为0时，粘性效果开始。粘性效果什么时候消失？当粘性约束矩形底部距离粘性元素为0时？消失时验证粘性定位的计算规则小demohttps://www.zhangxinxu.com/st...

上一篇：简单来说，通过CSS实现文字渐变色有两种方法

下一篇：js获取和设置css3属性值的实现方法

position-sticky相关文章