ffe 01 position sticky

一、sticky的行为

元素A的position为sticky，设置inset属性(left、top、right、bottom)。
元素B是A最近的祖先scroll container。
A在正常的文档流中，直到A的border-box距B的scrollport边沿距离达到inset属性设置的值
此时A定在B边沿，A的行为不影响其他元素

sticky+top

sticky+bottom

sticky+right

sticky+left

二、动与静

sticky定位方式与其他定位(static、relative、absolute、fixed)有着显著区别：sticky不光有静，而且有动。

静代表元素的最终状态
动代表元素的过渡状态

三、动静转换

动静如果没有转换和联系，那区分便没有意义。那sticky定位靠什么来转换呢？答案是滚动。

四、参照物

谈到滚动，便会选取一个参照物。 sticky元素(A)滚动时的参照物是最近的scroll container(B)的scrollport。

scroll container允许用户通过滚动去查看scrollable overflow area被“裁切”的部分。
scrollport是scroll container的视口，和padding-box是同一区域。

直觉上具有滚动能力的元素才是scroll container，但其实并不完全是这样。overflow为hidden的元素也是scroll container。overflow与scroll container的关系见下表：

overflow:	visible	clip	hidden	scroll	auto
是否为scroll container	否	否	否是	是	是

因为scroll container也强调“程序式滚动”。所谓“程序式滚动”，即overflow为hidden的元素可以通过编程方式(手动设置元素的scrollTop、scrollLeft属性)实现滚动。overflow为clip的元素无法实现这种“程序式滚动”，这也是hidden和clip这两种“溢出方式”最显著的区别。

overflow-y:scroll

overflow-y:hidden + scrollTop

参照物是最近的scrollport，那inset属性是分别从scrollport的边计算吗?并不是。(w3c文档中的edges of the nearest scrollport描述有歧义)。
inset属性分别从scroll container的content-box的边计算。查看了blink的sticky部分实现，确认了这一点。

五、思考问题

分别从content-box的边计算inset属性会框出一个限定sticky元素位置的区域，这个区域叫做sticky view rectangle。那sticky元素的border-box大于sticky view rectangle会怎样？
sticky元素的containing block对sticky定位有什么影响？(sticky元素的scroll container很可能不是它的containing block)