彻底理解粘性定位（position：sticky）

2023-12-19 03:42| 来源: 网络整理| 查看: 265

粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）例如：

.div{ position: sticky; top: 10px; }

在视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下

一、应用场景：

1、粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上

2、当用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。

二、粘性定位的原理：

1、要理解粘性定位元素，首先我们要知道这几个名词概念：视口元素，容器元素，粘性约束元素和 sticky 元素

视口元素：显示内容的区域。会设置宽，高。一般会设置 overflow:hidden容器元素：离 sticky 元素最近的能滚动的祖先元素。粘性约束元素：粘性定位的父元素。有时，也会出现粘性约束元素就是容器元素的情况。sticky 元素：设置了 position: sticky; 的元素。

2、滚动时，sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时，sticky 元素也会滚出视口。

三、粘性定位不生效的情况：情况1: 未指定 left, right, top 和 bottom 中的任何一个值

设置 position: sticky相当于设置position: relative。

要生效，要指定 left, right, top 或 bottom 中的任何一个值。

情况2: 垂直滚动时，粘性约束元素高度小于等于 sticky 元素高度

当粘性约束元素滚出视口时，sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小，sticky 元素没有显示固定定位状态的机会。

情况3: 粘性约束元素和容器元素之间存在 overflow: hidden 的元素

例如：

... ...

要生效，要把 overflow: hidden 的元素移除。

最后感谢大家的阅读，欢迎留言补充

【本文地址】

今日新闻