position

1.static:

元素根据文档的正常流程来进行定位,对顶部、右侧、底部、左侧和z索引属性没有影响。这是默认值。

2.relative:

元素根据文档的正常流进行定位,然后根据顶部、右侧、底部和左侧的值相对于自身进行偏移。偏移量不影响其他任何元素的位置;因此,页面布局中元素的空间与静态位置相同。

当z索引的值不是auto时,此值创建一个新的堆栈上下文。它未定义对表-*-组、表行、表列、表单元格和表标题元素的影响。

3.absolute

元素从正常的文档流中删除,并且在页面布局中不为元素创建空间。它的位置相对于它最近的位置的被继承人,如果有的话;否则,它将相对于初始包含块放置。它的最终位置由顶部、右侧、底部和左侧的值决定。

当z索引的值不是auto时,此值创建一个新的堆栈上下文。绝对定位的盒子的边缘不会与其他边缘折叠。

4.fixed

元素从正常的文档流中删除,并且在页面布局中不为元素创建空间。它是相对于由viewport建立的初始包含块进行定位的,除非它的一个被继承人有一个transform、perspective或filter属性设置为none以外的其他属性(请参阅CSS Transforms Spec),在这种情况下,被继承人行为包含块。(请注意,浏览器与透视图和过滤器的不一致导致了块的形成。)它的最终位置由顶部、右侧、底部和左侧的值决定。

这个值总是创建一个新的堆栈上下文。在打印文档中,元素被放在每个页面的相同位置。

5.sticky

元素根据文档的正常流进行定位,然后根据顶部、右侧、底部和左侧的值相对于其最近的滚动被继承人进行偏移,并包含块(最近的块级祖先),包括与表相关的元素。偏移量不影响任何其他元素的位置。

这个值总是创建一个新的堆栈上下文。请注意,一个粘性元素“粘附”到其最近的被继承人,它具有“滚动机制”(在隐藏溢出、滚动、自动或覆盖时创建),即使它不是最近的真正滚动被继承人。这有效地抑制了任何“粘性”行为(参见W3C CSSWG上的Github问题)。

原文地址:https://www.cnblogs.com/linlinlina-liu/p/9690488.html