昨天晚上写了个页面,感觉自己对相对定位和绝对定位还是有没有弄清楚的地方,所以今天还是来总结一下。

1、首先看两者的定义和区别

相对定位设置后是相对于它本身所在的文档流的位置进行定位,也就是相对于它原来的位置而言

绝对定位设置后就是相对于它的祖先节点中设置过相对定位的那块容器 ,来进行绝对定位如果祖先节点中没有设置 默认就是body标签。

区别绝对定位会脱离文档流,文档中不保留其定位前的位置,相对定位不会脱离文档流,定位前的位置依然保留。

2、什么时候用

实际上很少单独用到绝对定位,因为分辨率或窗口大小一旦改变,绝对定位的东西就有可能会移动位置影响设计效果,你是无法确定所有人的分辨率都和你制作页面使用的分辨率是一样的。
所以:通常都是相对定位的父元素里面嵌套一个或多个绝对定位的子元素,这用就能避免分辨率和窗口大小的改变而影响设计效果。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐