position

Posted 2021-01-07 linlinlina-liu

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问题)。