记一次绝对定位的位置问题。
问题描述
- 就是有一个大的盒子father,有一个属性
position: relative
- 在父盒子里面有一个正常文档流的盒子A
- 也是在父盒子里,也有一个盒子B,在A盒子后面,但是它是
position: absolute
,且只有位置属性right: 20px
.
此时,B盒子依然是在A盒子下方的,然后看起来的效果就像是B盒子是正常文档流一样,只是横向右对齐而已:
效果如上
对此有点疑惑,原以为它会脱标自动会在top:0
的位置上。然后在往上查阅资料后才发现,如果设置了位置属性,会按照位置属性去排列位置,但是如果没有设置的话,它就会在它原文档流的位置上,看上去就像是“没有脱离文档流”。
事实上,绝对定位的元素是肯定脱标的,脱离了文档流,不占位的,只是效果特殊而已。
嗯,有点神奇。