绝对定位没有脱离文档流?

457 阅读1分钟

记一次绝对定位的位置问题。

问题描述

  1. 就是有一个大的盒子father,有一个属性position: relative
  2. 在父盒子里面有一个正常文档流的盒子A
  3. 也是在父盒子里,也有一个盒子B,在A盒子后面,但是它是position: absolute,且只有位置属性right: 20px.

image.png

此时,B盒子依然是在A盒子下方的,然后看起来的效果就像是B盒子是正常文档流一样,只是横向右对齐而已:

image.png

效果如上

对此有点疑惑,原以为它会脱标自动会在top:0的位置上。然后在往上查阅资料后才发现,如果设置了位置属性,会按照位置属性去排列位置,但是如果没有设置的话,它就会在它原文档流的位置上,看上去就像是“没有脱离文档流”。
事实上,绝对定位的元素是肯定脱标的,脱离了文档流,不占位的,只是效果特殊而已。

嗯,有点神奇。