时间:2021-07-01 10:21:17 帮助过:21人阅读
相对定位根据文档流中元素的初始位置加上指定的偏移量(offset)来计算元素的最终显示位置。采用相对定位的元素不影响其他相邻盒子的显示效果,即如果元素B采用了相对定位,文档流中元素B后面的元素依然根据元素B的初始位置来计算最终的显示位置,就好像元素B依然占据原来的位置并没有偏移一样。如下图,在给第二列第三行的元素应用了相对定位后,第二列第四行的元素并没有向下移动。
采用绝对定位的元素,其位置由left、right、top、bottom指定的偏移量和元素的包含块(containing block)来确定。什么是包含块,在绝对定位的语境下,采用绝对定位的元素,它的包含块由离他最近的使用绝对/相对/固定定位的父元素确定,具体规则参考CSS规范。采用绝对定位的元素将脱离文档流。如下图,第三行元素应用了绝对定位,脱离的文档流,第四行元素上移占据了第三行元素原来的位置。第三行元素则显示在了左上角位置。
从上面的分析可以看出,不管是相对定位还是绝对定位,都是根据left、right、top、bottom这四个属性设置的偏移量来定位元素的,不同的地方在于计算的参考起点不同。相对定位根据元素在文档流中的原始位置来计算最终的显示位置,绝对定位根据元素的包含块的位置来计算最终的显示位置。