相对定位：position: relative
- 没有脱离标准文档流
- 层级自动提高，会覆盖浮动元素
- left:距离左边移动
- right:距离右边移动
- top:距离上边移动
- bottom:距离下边移动
绝对定位:position: absolute
absolute 布局的关键点选择哪一个元素作为布局区域，如果元素的所有父元素均未设置 position 属性（值为 static），布局区域会选择可视区域。
- 如果祖先元素没有定位，相对于浏览器定位
- 如果祖先元素有定位,相对于"最近的"定位的祖先元素定位
- 绝对定位会脱离标准文档流，影响下边的元素
- 绝对定位找参照祖先元素，应该用relative
- 经过绝对定位的元素会变成行内块元素
固定定位：position:fixed
- 不占据空间，固定定位是脱离标准流。
- 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系。
- 不随滚动条滚动
粘性定位：position:sticky
- 以浏览器的可视窗口为参照点移动元素。
- 占有原先的位置。
- 必须添加top、left、right、bottom其中一个才有效。
- 兼容性差，IE不支持，不常用。
- 粘性定位并不会 脱离文档流
层级关系 ： 定位层级>浮动层级>标准文档流的层级
参考：链接
网友评论