重新认识相对定位和绝对定位

相对定位

• 相对自身定位定位
• 不脱离文档流

绝对定位

• 相对position 不为 static 的父元素定位
• 脱离文档流
• 如果父元素全部为static则相对视窗定位
• 绝对定位的元素可以通过指定top和bottom ，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left 和 right并将width 指定为auto来填充可用的水平空间。

left、right、top、bottom

固定值

如10px、100px等

• 当position 为 static 时，这四个属性无效
• 当position 为 relative 时，以盒模型的content左上角为源点
• 当position 为 absolute 时，以盒模型的padding左上角为源点

百分比

如10%、100%等，其计算与绝对还是相对定位无关

• top，bottom:基于父容器的高；
• left，right:基于父容器的宽；
• margin-top，margin-right，margin-bottom，margin-left:基于父容器的宽；
• padding-top，padding-right，padding-bottomm，padding-left:基于父容器的宽；