Sixth week blog3

Posted 2021-01-12 hayaasyh

sticky 和 fixed区别

fixed：固定的位置。一般用作悬浮按钮的设计。不管当前页面如何滚动，它的位置始终相对于窗体不变。元素从普通文档流中删除,并没有空间为页面中的元素创建布局。 它是相对于初始定位包含块建立的视窗,除非其祖先之一transform, perspective,或filter属性集之外的东西none(见CSS转换规范),在这种情况下,祖先的行为包含块。 (注意,浏览器不一致perspective和filter包含块的形成做出贡献。) 其最终位置的值决定top, right, bottom,left.这个值总是创建一个新的叠加背景。 在打印文档中,元素放置在相同的位置每一页.

sticky：粘贴到某个位置。当组件设置了该属性值后，当页面滑动时，组件会跟着页面移动，当组件触及到窗体后，页面若继续滑动，组件则处在与窗体接触的位置不动。元素的定位是根据文档的正常流动,然后相对于其抵消最近的滚动的祖先和包含块(最近的块级的祖先),包括table-related元素,基于的值top, right, bottom,left。 偏移量并不影响其他元素的位置。这个值总是创建一个新的叠加背景。 注意,粘性的元素“棍棒”最近的祖先有“滚动机制”(时创建的overflow是hidden, scroll, auto,或overlay),即使这不是最近的祖先实际上滚动的祖先。 这有效地抑制任何(参见“粘性”行为Github在W3C CSSWG问题).