CSS position:sticky 踩坑笔记

Caleb ... 2020-05-21
  • CSS
  • Position
大约 4 分钟

在二次开发主题的过程中,发现了很多问题。其中技术点不高,但让人瞬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 , fixedsticky 的一个元素(换句话说,除static以外的任何东西)。
  • 相对定位元素(relatively positioned element) 是计算后位置属性为 relative 的元素。
  • 绝对定位元素(absolutely positioned element) 是计算后位置属性为 absolutefixed 的元素。
  • 粘性定位元素(stickily positioned element) 是计算后位置属性为 sticky 的元素。

# 关键字

关键字取值一览

DETAILS
关键字 作用描述
static 该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top , right , bottom , leftz-index 属性无效。
relative 该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute 元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
fixed 元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform , perspectivefilter 属性非 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 属性。我就是因为这个原因,搞了一上午。

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

# 愿大家及时行乐,完结撒花🎉🎉🎉

打赏