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