css中的position属性

css中的position属性主要用于指定一个元素在文档中的定位方式。和top,left,right,bottom属性共同使用来决定元素的最终位置。

static(默认值): 元素处于正常的文本流中。此时对其设置top,left,right,bottom属性是无效的。

relative: 相对定位。相对于元素未添加定位时的位置进行调整，它不会影响其他元素的偏移。它会在此元素未添加定位的位置留下空白，即相对定位的元素并未脱离文本流。

absolute: 绝对定位。相对于该元素最近的一个非static定位的祖先元素进行偏移。（绝对定位的元素可以设置外边距，且不会与其他边距合并）

fixed: 固定定位。相对于屏幕视口的位置来指定元素位置，元素的位置在屏幕滚动时不会改变。

sticky(实验性，IE下不支持)：粘性定位。盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

GIF

cloudtian / blogs