名称
static 为默认值 (忽略 top, bottom, left, right 或者 z-index 声明)
relative 表现的和 static 一样,除非你添加了一些额外的属性 通过设置额外属性(top/left/bottom/right)可以控制相对static布局的偏移
fixed 固定定位 会相对于视窗来定位,可以使用 top/left/bottom/right定位
absolute 相对第一个父元素(非static)进行固定定位 如果父元素是static元素, 就相对于body元素进行布局
仅设置
position: relative;
不做其他处理
position: relative;
width: 400px;
top: -20px;
left: 40px;
position: absolute;
padding: 20px;
right: 20px;
不影响父级的布局。

移动设备的fixed支持性很差?

其他:

  • sticky: 粘性定位,该定位基于用户滚动的位置。需要考虑兼容性

  • inherit: 父元素继承 position 属性

  • initial: 设置该属性为默认值,详情查看 CSS initial 关键字