摘要：我不是最后一个知道的的含义是指定位类型，取值类型可以有和，这里是新发布的一个属性。当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。在开发中注意兼容性目前仍是一个试验性的属性，并不是推荐的标准。
我不是最后一个知道的：position: sticky
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。关于这里只讲述sticky的用法，关于sticky：
设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动（相当于此时fixed定位）。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。
在web开发中注意兼容性：sticky目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图，基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari小程序自定义导航栏中使用sticky:
sticky是可以再小程序端生效的！
亲测这个属性在自定义导航时特别适用，我也是在纠结自定义导航的fixed适配占位问题时才了解到这个属性。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114457.html
摘要：生效规则须指定或四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且和同时设置时，生效的优先级高，和同时设置时，的优先级高。设定为元素的任意父节点的属性必须是，否则不会生效。 简介 前面写了一篇文章讲解了position常用的几个属性：《CSS基础篇-- position属性讲解》一般都知道下面几个常用的： { position: static; position: r...
摘要：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。相对定位，相对于自己的初始位置，不脱离文档流。 有过css开发经验的同学，对于position这个属性一定不会陌生，然而这个熟悉的属性确是面试题中的常客，也就说明了该属性在css的世界是有一定的江湖地位的，那么我们就来详细的说说position这个属性。 在w3school中是这样解释posi...
摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶 页面滚动结束后页面才渲染 需求 经常会有这样的需求，当页面滚动到某一个位置fixedTopV...
摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶 页面滚动结束后页面才渲染 需求 经常会有这样的需求，当页面滚动到某一个位置fixedTopV...
摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶 页面滚动结束后页面才渲染 需求 经常会有这样的需求，当页面滚动到某一个位置fixedTopV...
阅读 3617·2021-11-24 09:38
阅读 2778·2021-11-17 09:33
阅读 3693·2021-11-10 11:48
阅读 1023·2021-10-14 09:48
阅读 1517·2021-09-26 09:55
阅读 1288·2021-09-10 10:50
阅读 2986·2019-08-30 13:14
阅读 2429·2019-08-29 18:37
