本期，边肖将为您带来有关如何使用position:sticky的信息。文章内容丰富，从专业角度进行分析和描述。看完这篇文章，希望你能有所收获。
在研究rem布局的时候，偶然看到网易新闻移动主页的导航栏使用了一个CSS 3属性的粘性定位位置：sticky。
它是相对定位位置：相对和固定定位位置：固定的混合。
有了它，我们可以在不监控滚动事件的情况下实现导航栏滚动的绝对定位效果。
基本用法
nav { position:stickytop:10px/*阈值*/}
top/bottom属性
例如，当我们设置top:100px时，元素相对于彼此定位，直到视口滚动，直到元素的距离小于设置的top:100px。滚动到top:100px后，元素将固定在top:100px的位置，直到视口回滚到阈值以下。
根据下面的例子，我们可以看到position:sticky元素设置的顶值是距离视口的距离，当它滚动到低于其值的距离时，它将在视口中固定，此时，这个元素的效果是固定定位。
以下示例的结构：
H2顶部高度200px红线是中心线/h2导航这是导航顶部：100 px/导航p滚动一个/p滚动一个/p
生效条件
需要注意的是，使用该属性有几个必要条件，否则无效：
父元素不能有overflow:hidden或overflow:auto属性。
您必须指定顶部、底部、左侧和右侧4个值中的一个，否则您将只能处于相对位置。
父元素的高度不能低于粘性元素的高度。
粘性元素仅在其父元素内有效。
兼容情况
position :-web kit-sticky；位置：粘性；
这就是如何使用上面边肖分享的位置：sticky。如果你恰好也有类似的疑惑，可以参考上面的分析来理解。想了解更多，请关注行业信息渠道。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/94844.html