CSS position:sticky 踩坑笔记

在二次开发主题的过程中，发现了很多问题。其中技术点不高，但让人瞬gan爆炸的就是这一条css属性。

position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

首先先了解下: CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

目前共有4种定位类型。

👉 定位类型

• 定位元素(positioned element) 是其计算后位置属性为 relative , absolute , fixed 或 sticky 的一个元素(换句话说，除static以外的任何东西)。
• 相对定位元素(relatively positioned element) 是计算后位置属性为 relative 的元素。
• 绝对定位元素(absolutely positioned element) 是计算后位置属性为 absolute 或 fixed 的元素。
• 粘性定位元素(stickily positioned element) 是计算后位置属性为 sticky 的元素。

👉 关键字

关键字取值一览

更多

关键字	作用描述
static	该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top , right , bottom , left 和 z-index 属性无效。
relative	该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute	元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距(margins)，且不会与其他边距合并。
fixed	元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform , perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
sticky	元素根据正常文档流进行定位，然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top , right , bottom , 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

👉 演示

因为 static , relative , absolute , fixed 多多少少都在开发中用过了，所以我就不进行展示了。直接从 sticky 入手。

设置 position:sticky 时, 定位属性设置( top ,bottom ,right ,left )之一即可。

使用条件：

1、父元素不能overflow:hidden或者overflow:auto属性。

2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。

3、父元素的高度不能低于sticky元素的高度。

4、sticky元素仅在其父元素内生效。

👉 手机通讯录为例

A

安安

荌荌

安卉

安娜

安妮

B

白雪

白云

碧螺

碧菡

碧玉

C

采文

采萱

初雪

春华

春雪

D

丹丹

丹彤

丹红

冬雪

F

方方

芳菲

芳华

芳馨

芳泽

切记，父元素不能overflow:hidden或者overflow:auto属性。我就是因为这个原因，搞了一上午。

以上所有内容供大家参考，如有问题请及时指正。

👉 愿大家及时行乐，完结撒花🎉🎉🎉