关于css中position的两个属性值sticky和fixed的不同

原文件中：

fixed：The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filtercontributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

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 (see the Github issue on W3C CSSWG).

Sticky可以使用参数，是位置跟relative使用参数的效果是一致的，都是相对于static的变化；sticky具有“滚动机制”。

sticky定位可以被认为是relative和fixed的混合。粘性定位的元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定的，直到它到达其父母的边界。

fixed相对于视口定位，不管视口如何滚动，它的位置始终不变，而sticky则是在目标区域内随着页面的滚动而滚动，超出这个区域后就跟fixed一样不管视口如何滚动位置始终不变

转载于:https://www.cnblogs.com/zj1997/p/9786829.html