CSS定位的教程

2020-04-27 07:27:20易采站长站整理

4.绝对定位

绝对定位与相对定位的一大不同之处就是,当我们把一个元素设置成绝对定位,那么这个元素将会脱离文档流,其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置,而参照物则需要根据它祖先元素的定位设置来确定。

所谓根据它祖先元素的定位设置来确定简单理解为:相对于该元素最近的已定位的祖先元素,如果没有一个祖先元素设置定位,那么参照物是body层。

在祖先元素没定位的情况下,使用absolute。在这种情况下,参考物就是body。
祖先元素有定位,祖先元素只要设置了值不为position:static之外的值,都视为有定位,并且最近的祖先元素会被设置为绝对定位元素的参照物。在这种情况下,参考物就是最近的祖先元素。
在没设置left/right、top/bottom的情况下,absolute元素的位置就是该元素在文档流里的位置