position: sticky; 粘性布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position: sticky; 粘性布局相关的知识,希望对你有一定的参考价值。

参考技术A 粘性布局: 结合了 position:relative 和 position:fixed 两种定位于一体的特殊定位,适用于一些特殊场景。具体说明可查看 MDN-position
如下图:
要求滑动时固定第一行 ,第一列

3

使用 position:sticky 实现粘性布局

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。

如:父级元素有transform导致position:fixed不生效时;(上篇文的方法也适用、ios不兼容时适用)

具体介绍:

http://www.cnblogs.com/coco1s/p/6402723.html

以上是关于position: sticky; 粘性布局的主要内容,如果未能解决你的问题,请参考以下文章

使用 position:sticky 实现粘性布局

position sticky 定位

粘性定位position:sticky

彻底理解粘性定位 - position: sticky

使用带有 position:sticky 的 Flexbox

JS简单实现“滚动到顶部“按钮悬浮效果,在一定高度才显示 - 替代CSS粘性定位position:sticky方案