position一共有5种
- static 默认
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- sticky 粘性定位
区别
1.static
默认的定位方式,没写positon时就是static,此时设置left,right,top,bottom无效
2.relative
-
基于默认位置即static的位置进行偏移 -
元素所占的空间还保留在原位不会被其他元素所挤占,即还在正常文档流中
3.absolute
-
基于他的包含块进行偏移(他外层的第一层出现定位的元素的padding区域) -
一般配合relative使用,如果没有设置就根据html为基点进行偏移
-
会使元素脱离标准文档流,他所占的空间会被其他元素所挤占,然后他会盖在挤占他元素的上面
4.fixed
- 相对于浏览器视口进行偏移,无论页面如何滚动都会固定在一个位置
会脱离文档流,宽高根据内容变动
5.sticky
相当于relative+fixed
在设置的一定位置成为固定定位,其他时候处于正常文档流
其他
z-index设置z轴偏移,数值越大越上方
sticky设置会失效