CSS 定位 sticky 踩坑笔记

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

position:sticky 是 css 定位新增属性；可以说是相对定位 relative 和固定定位 fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如 top：100px)；position:sticky 这时的效果相当于 fixed 定位，固定到适当位置。
首先先了解下: CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

目前共有 4 种定位类型。

关键字	作用描述
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 属性。

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