摘要：前言你知道定位有哪些值吗常规，绝对定位，相对定位。是的，正如标题提到的，它就是粘性定位。它后续的定位不会对后面的元素产生影响。该定位依赖于自身的阀值，所以必须设置其中之一的值才会有效，否则表现为相对定位。
前言
你知道position定位有哪些值吗？常规static，绝对定位fixed、absolute，相对定位relative。好吧，这些是个前端都知道。今天要记录的是个不常见的、还在实验阶段的、兼容性不怎么完美的一个值。是的，正如标题提到的，它就是粘性定位sticky。你之前是否听说过呢？当我知道这个定位值后，我震惊了，卧槽，我是个假的前端吧，学前端一年多竟然不知道定位还有个粘性定位。然后我就试了一下这个定位的效果，哇哦，真的很好用，遗憾的是兼容性不够完美，但是现代主流浏览器的较新版本都已经兼容了。
position:sticky
描述
根据MDN上的解释，它首先会按照常规定位方式布局于文档流中，然后再根据文档BFC和最近的containing block（最近的块级祖先元素）定位。它后续的定位不会对后面的元素产生影响。该定位依赖于自身的top、left、bottom、right阀值，所以必须设置其中之一的值sticky才会有效，否则表现为相对定位。
我的理解
元素在视口没有滚动到设定的阀值时，它会表现为static定位（MDN上好像解释说是表现为relative，写的demo上发现top等值并没有表现出相对自身的移动，如理解错误，请千万指出，感谢），当元素被滚动到阀值时，它不会越过阀值，而是表现为fixed定位。
举个
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116080.html
摘要：默认值当元素的属性没有设置或者值为时，元素处于文档流中，且等偏移属性是不起作用的。相对定位设置相对定位的元素仍然处于文档流中，其占据的空间仍然保留。包含块的判定绝对定位绝对定位元素会脱离文档流，此时其原有空间为，也就是不存在透明砖块占位。 前言 今天呢，想聊聊css里的position属性。也就是元素定位属性。目的呢，是为了梳理一下自己学习工作中积累的经验。 标准 根据MDN文档，CS...
摘要：默认值当元素的属性没有设置或者值为时，元素处于文档流中，且等偏移属性是不起作用的。相对定位设置相对定位的元素仍然处于文档流中，其占据的空间仍然保留。包含块的判定绝对定位绝对定位元素会脱离文档流，此时其原有空间为，也就是不存在透明砖块占位。 前言 今天呢，想聊聊css里的position属性。也就是元素定位属性。目的呢，是为了梳理一下自己学习工作中积累的经验。 标准 根据MDN文档，CS...
摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶 页面滚动结束后页面才渲染 需求 经常会有这样的需求，当页面滚动到某一个位置fixedTopV...
摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶 页面滚动结束后页面才渲染 需求 经常会有这样的需求，当页面滚动到某一个位置fixedTopV...
阅读 2594·2021-11-02 14:42
阅读 3005·2021-10-08 10:04
阅读 995·2019-08-30 15:55
阅读 865·2019-08-30 15:54
阅读 2185·2019-08-30 15:43
阅读 1580·2019-08-29 15:18
阅读 763·2019-08-29 11:11
阅读 2227·2019-08-26 13:52
