css的position属性

参考博客 https://blog.csdn.net/jianghao233/article/details/80534835

static

默认值。没有定位，元素出现在正常的流中（会忽略 top, bottom, left, right 或者 z-index 声明）。

relative

生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。

• 定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
• 设置top、left等属性相对于自身进行偏移。

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
一般将其父元素设置为relative，然后子元素用absolute定位。

• 元素脱离文本流，本身的位置不存在。
• 设置top、left等属性相对于父元素进行偏移。

relative和absolute的区别：

它们都脱离了文本流，relative在文本流中的位置依然存在，而absolute本身的位置不存在。
relative相对于自身的位置进行偏移，而absolute相对于非static定位的父元素进行偏移。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

sticky

1、相对于自身进行偏移。
2、固定在页面。

sticky和fixed的区别：

两者都是固定在页面，不对滚动条而移动，但是设置left、top属性的时候，fixed相对于浏览器进行偏移，而sticky相对于自身进行偏移。