前言你知道位置定位的价值吗？常规static，绝对定位fixed，absolute，相对定位relative。嗯，这些都是前端知道的。今天要记录的是一个不常见的，还在实验阶段，不太兼容的值。是的，正如标题所提到的，它很粘。你以前听说过吗？当我知道这个定位值时，我震惊了。卧槽，我是伪前端。学前端一年多了，不知道还有粘性定位。然后试了一下这个定位的效果，哇，真是好用，可惜兼??容性不是很完善，不过现代主流浏览器的更新版本已经可以兼容了。position:stickydescription根据MDN上的解释，首先会按照常规的定位方式在文档流中进行布局，然后根据文档BFC和最近的包含块（nearestblock-levelancestorelement）进行定位。其后续定位不会影响后面的元素。这个定位依赖于它自己的top,left,bottom,rightthresholds，所以其中一个必须设置为sticky才有效，否则就是相对定位。我的理解是当视口没有滚动到设定的阈值时，元素会表现为静态定位（MDN上好像解释是相对的，写的demo发现top值不显示相对移动toitself，如果理解有误，请指出，谢谢），当元素滚动到阈值时，不会越过阈值，而是固定定位。例如，假设position:sticky;顶部：20px；设置后，元素将在初始布局期间静态定位。如果视口中初始定位的top值小于20px，会立即显示为top:20px固定定位；或者初始布局的viewporttop值大于20px，则正常布局，当窗口滚动时，一旦其top值达到或小于20px，则表现为top:20px固定定位，直到其父元素为止元素的底部与它自己生成的底部重合，它会粘在父元素的底部并被滚动掉。适用场景1.随着屏幕滚动，需要一直在视口顶部导航2.部分标题3.其他我还不知道的测试示例//APP.jsxconstructor(props){super(道具）;this.state={todo:{A:["apple","animal","approve","action","active"],B:["binary","battle","boss","because","成为"],C:["客户","cool","call","come","cake","case"],D:["decomand","disappoint","disagree","决定”,“延迟”,“日期”]}};}render(){return(
