之前在写页面的时候遇到个关于定位的小问题,记忆中如果子级设置绝对定位,那么他会以最近相对定位的父级做为目标进行定位。在布局的时候下意识的觉得如果让子级相对于父级做定位,父级要设置相对定位才可以,要不然就会以body为目标,那么问题来了!如下:
盒子二以盒子三为目标做绝对定位,所以盒子二设置绝对定位,盒子一设置相对定位,但是盒子三以盒子二为目标做绝对定位,可是盒子二已经设置绝对定位了啊,不能在设置相对定位了啊。错了,经实现发现,盒子三以盒子二为目标,那么盒子二设置绝对定位是可以的!
总结:只要父级元素设了position并且不是static,那么设定了absolute的子元素即以此为包含块(最近的)。
绝对定位(Absolute positioning)元素定位的参照物是其包含块,既相对于其包含块进行定位,不一定是其父元素。