| 名称 | | |
|---|
| 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 关键字。