问题
前段时间做H5时发现有个定位问题怎么都搞不好,后来捣鼓了好久,之后发现当在出问题的那个盒子设置了left属性之后解决了这个定位问题,当时一时间没反应过来,也因为比较赶就没有细想,今天才突然回想起这个问题。
改前的代码:
.info-box {
position: absolute;
top: -40px;
...
}
改之后的代码:
.info-box {
position: absolute;
top: -40px;
left: 0;
...
}
结论
当只给元素定义了position:absolute
时,如果top, bottom, left, right
都没有指定时,则left,top
值与原文档流位置一致(当然了它是不占位的)。
所以我上面只给info-box设置了top
属性而未设置left
属性就造成了它在水平方向上仍然保持原有位置,而这个位置绝对不是left:0
。实际上不论是何种定位,规则都如上所述。