css定位

position属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。 属性： relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位

1、相对定位：position:relative

在相对定位中，定位元素是根据自己原本所在位置进行定位，相对定位不会脱离文档流，在文档流中不会影响其他元素，偏移量根据给定的值，值可以为负数

• top数值越大越往下，顶部与原位置差
• bottom数值越大越往上，底部与原位置差
• left数值越大越往右，左边与原位置差
• right数值越大越往左，右边与原位置差

特点：占原位置，在文档流中占位置

2、绝对定位：position:absolute

绝对定位中，定位依据是定位元素的父级，直到找到body元素，绝对定位的元素会脱离文档流，行内可设置宽高，块元素不独点一行，由内容撑开宽高。

• top数值越大越往下，顶部与定位父级的顶部之差
• bottom数值越大越往上，底部与定位父级的底部差
• left数值越大越往右，左边与定位父级的左部差
• right数值越大越往左，右边与定位父级的右部差

特点：占原位置，在文档流中占位置

3、固定定位：position:fixed

根据浏览器窗口的位置和大小进行定位，元素的位置在屏幕内容滚动时不会改变位置，固定定位的元素会移出文档流

• top根据窗口的上边进行定位
• bottom根据窗口的下边进行定位
• left根据窗口的左边进行定位
• right根据窗口的右边进行定位

4、粘性定位：position:sticky

粘性定位可以看作是相对定位和固定定位的混合，元素在跨越阈值前为相对定位,之后为固定定位；

在元素滚动到距离窗口 top小于10px之前,元素为相对定位,之后元素将固定在top为10px的位置,直到窗口滚回。