6th week blog3

Posted 2021-01-12 shengbowen1004

sticky：The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn‘t the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior .

该元件根据文档的正常流动定位，然后偏移相对于它的最近的祖先滚动和包含块（最接近的块级祖先），包括表相关的元素的基础上的值top，right，bottom，和left。偏移量不会影响任何其他元素的位置。此值始终创建新的堆叠上下文。需要注意的是粘性元素“大棒”，以具有“滚动机制”，其最近的祖先（创建时overflow是hidden，scroll，auto，或overlay），即使祖先是不是最近的实际滚动的祖先。这有效地抑制了任何“粘性”行为。

个人理解：sticky的用法，例如网页中两侧的广告，上下滑动页面时，它的位置不会变。

与fixed的区别：

fixed：固定的位置。一般用作悬浮按钮的设计。不管当前页面如何滚动，它的位置始终相对于窗体不变。

sticky：粘贴到某个位置。当组件设置了该属性值后，当页面滑动时，组件会跟着页面移动，当组件触及到窗体后，页面若继续滑动，组件则处在与窗体接触的位置不动。

区别：在视口范围时该元素的位置并不受到定位影响（设置top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。