css的绝对定位、相对定位、固定定位、粘性定位的区别

相对定位：position: relative

• 没有脱离标准文档流
• 层级自动提高，会覆盖浮动元素
• left:距离左边移动
• right:距离右边移动
• top:距离上边移动
• bottom:距离下边移动

绝对定位:position: absolute

absolute 布局的关键点选择哪一个元素作为布局区域，如果元素的所有父元素均未设置 position 属性（值为 static），布局区域会选择可视区域。

• 如果祖先元素没有定位，相对于浏览器定位
• 如果祖先元素有定位,相对于"最近的"定位的祖先元素定位
• 绝对定位会脱离标准文档流，影响下边的元素
• 绝对定位找参照祖先元素，应该用relative
• 经过绝对定位的元素会变成行内块元素

固定定位：position:fixed

• 不占据空间，固定定位是脱离标准流。
• 以浏览器的可视窗口为参照点移动元素。
• 跟父元素没有任何关系。
• 不随滚动条滚动

粘性定位：position:sticky

• 以浏览器的可视窗口为参照点移动元素。
• 占有原先的位置。
• 必须添加top、left、right、bottom其中一个才有效。
• 兼容性差，IE不支持，不常用。
• 粘性定位并不会 脱离文档流

层级关系 ： 定位层级>浮动层级>标准文档流的层级

参考：链接