Css position:sticky 初探

*sticky属性与relative类似但是其offset实根据最近的拥有scrolling box的先祖元素来确定的，如果没有拥有scrolling box的话会根据viewport来计算

那么什么是scrolling box呢？

An HTML scrollbox is basically a box with scrollbars. Usually the scrollbox is made using the HTML <div> tag and the scrollbars are defined using the CSS overflow property. （From https://www.html.am/html-codes/scrollboxes/html-scrollbox.cfm）

姑且理解为

含有滚动条的或者含有overflow属性的皆为scroll box(试了下当设置为auto,overlay,sroll的时候会产生效果，估计就是所谓的scroll box)

实践：

1.设置父元素overflow:auto,子元素设置为sticky且top:10px;

可以看到sticky的元素根据距其最近的具备scoll box的父元素计算offset

2.去除overflow:auto

可以看到之前设置的top属性无效了,找不到先祖元素为scrollbox的了，故基于viewport来计算offset:

看到有些文章说设置overflow:auto或者hidden不会生效，特地试了下发现是有效的..很疑惑。

1.auto

2.hidden

可以看到定位属性还是产生了效果。（到底是sticky还在生效还是已经类似于relative效果，待研究）

还是基于父元素为scroll box:

1.对于块级兄弟元素(位于普通文档流中)

前一个节点为block元素，自身为sticky，不会覆盖前面普通文档流中的元素

2.对于块级兄弟元素(脱离文档流:：float)

对于脱离文档流的元素(float或者absolute)会直接按祖先元素的顶部开始计算

sticky VS fixed

1.先来看 fixed

2.再来看sticky, 去除父元素overflow（使之根据viewport计算）

可以看到当给其父元素设置固定高度后，sticky元素会受制于父元素的高度，即最多到达父元素的底部

浏览器兼容性：

ovquchu

*仅为个人学习之用

Ref:https://www.w3.org/TR/css-position-3/#sticky-position